iscs 绘图代码调整

src/iscs/constant/deviceRender.js

@@ -123,12 +123,21 @@ deviceRender[deviceType.FireDamper] = {
     zlevel: 1,
     z: 4
 };
+
+/** 排烟防火阀 */
+deviceRender[deviceType.SmookExhaustFd] = {
+    _type: deviceType.SmookExhaustFd,
+    zlevel: 1,
+    z: 4
+};
+
 /** 防烟防火阀 */
 deviceRender[deviceType.SmookProofFd] = {
     _type: deviceType.SmookProofFd,
     zlevel: 1,
     z: 4
 };
+
 /** 闸机渲染配置 */
 deviceRender[deviceType.BrakeMachine] = {
     _type: deviceType.BrakeMachine,

src/iscs/constant/deviceType.js

@@ -20,6 +20,7 @@ const deviceType = {
     TunnelFan:'TunnelFan',
     FireDamper:'FireDamper',
     SmookProofFd:'SmookProofFd',
+    SmookExhaustFd:'SmookExhaustFd',
     BrakeMachine: 'BrakeMachine',
     EntranceGuard: 'EntranceGuard',
     SemiAutomaticTicketMachine: 'SemiAutomaticTicketMachine',

src/iscs/shape/bas/fireDamper.js

@@ -1,8 +1,7 @@
 import Group from 'zrender/src/container/Group';
-import Polygon from 'zrender/src/graphic/shape/Polygon';
 import Polyline from 'zrender/src/graphic/shape/Polyline';
 import Circle from 'zrender/src/graphic/shape/Circle';
-export default class smookProofFd extends Group {
+export default class fireDamper extends Group {
     constructor(device) {
         super();
         this.model = device.model;
@@ -17,15 +16,22 @@ export default class smookProofFd extends Group {
             id: this.model.code,
             position: [this.model.point.x, this.model.point.y]
         });
+        const polygonW = this.model.width;
+        let polygonH = this.model.width / 2;
+        let cy = this.model.width / 4;
+        if (this.model.direction == 'vertical') {
+            polygonH = this.model.width * 2;
+            cy = this.model.width / 2;
+        }
         this.polygon1 = new Polyline({
             zlevel: this.model.zlevel,
             z: this.model.z,
             shape:{
                 points:[
                     [0, 0],
-                    [this.model.width, 0],
+                    [polygonW, 0],
-                    [this.model.width, this.model.width / 2],
+                    [polygonW, polygonH],
-                    [0, this.model.width / 2],
+                    [0, polygonH],
                     [0, 0]
                 ]
             },
@@ -38,9 +44,9 @@ export default class smookProofFd extends Group {
             zlevel: this.model.zlevel,
             z: this.model.z,
             shape:{
-                cx:this.model.width / 2,
+                cx:polygonW / 2,
-                cy:this.model.width / 4,
+                cy:polygonH / 2,
-                r:this.model.width / 4
+                r:cy
             },
             style: {
                 stroke:this.model.color,
@@ -48,39 +54,8 @@ export default class smookProofFd extends Group {
                 lineWidth:2
             }
         });
-
-        this.polyline1 = new Polyline({
-            zlevel: this.model.zlevel,
-            z: this.model.z,
-            shape:{
-                points:[
-                    [0, 0],
-                    [this.model.width, this.model.width / 2]
-                ]
-            },
-            style: {
-                stroke:this.model.color,
-                lineWidth:2
-            }
-        });
-        this.polyline2 = new Polyline({
-            zlevel: this.model.zlevel,
-            z: this.model.z,
-            shape:{
-                points:[
-                    [this.model.width, 0],
-                    [0, this.model.width / 2]
-                ]
-            },
-            style: {
-                stroke:this.model.color,
-                lineWidth:2
-            }
-        });
         this.grouper.add(this.polygon1);
         this.grouper.add(this.circle);
-        this.grouper.add(this.polyline1);
-        this.grouper.add(this.polyline2);
         this.add(this.grouper);
     }
     setModel(dx, dy) {

src/iscs/shape/bas/smookExhaustFd.js

@@ -0,0 +1,97 @@
+import Group from 'zrender/src/container/Group';
+import Polyline from 'zrender/src/graphic/shape/Polyline';
+import Circle from 'zrender/src/graphic/shape/Circle';
+export default class smookExhaustFd extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this._type = device.model._type;
+        this._code = device.model.code;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.zlevel;
+        this.create();
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        const polygonW = this.model.width;
+        let polygonH = this.model.width / 2;
+        let cy = this.model.width / 4;
+        if (this.model.direction == 'vertical') {
+            polygonH = this.model.width * 2;
+            cy = this.model.width / 2;
+        }
+        this.polygon1 = new Polyline({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape:{
+                points:[
+                    [0, 0],
+                    [polygonW, 0],
+                    [polygonW, polygonH],
+                    [0, polygonH],
+                    [0, 0]
+                ]
+            },
+            style: {
+                stroke:this.model.color,
+                lineWidth:2
+            }
+        });
+
+        this.circle = new Circle({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape:{
+                cx:polygonW / 2,
+                cy:polygonH / 2,
+                r:cy
+            },
+            style: {
+                stroke:this.model.color,
+                fill:'rgba(0,0,0,0)',
+                lineWidth:2
+            }
+        });
+
+        this.polyline1 = new Polyline({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape:{
+                points:[
+                    [0, 0],
+                    [polygonW, polygonH]
+                ]
+            },
+            style: {
+                stroke:this.model.color,
+                lineWidth:2
+            }
+        });
+        this.polyline2 = new Polyline({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape:{
+                points:[
+                    [polygonW, 0],
+                    [0, polygonH]
+                ]
+            },
+            style: {
+                stroke:this.model.color,
+                lineWidth:2
+            }
+        });
+        this.grouper.add(this.polygon1);
+        this.grouper.add(this.circle);
+        this.grouper.add(this.polyline1);
+        this.grouper.add(this.polyline2);
+        this.add(this.grouper);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/factory.js

@@ -35,6 +35,7 @@ import Staircase from './staircase';
 import SingleStaircase from './singleStaircase';
 import ArcStatus from './ArcStatus';
 import IscsButton from './button';
+import SmookExhaustFd from './bas/smookExhaustFd';
 
 const iscsShape = {};
 iscsShape[deviceType.ManualAlarmButton] = ManualAlarmButton;
@@ -57,6 +58,7 @@ iscsShape[deviceType.OrbitalVentilator] = OrbitalVentilator;
 iscsShape[deviceType.JetFan] = JetFan;
 iscsShape[deviceType.TunnelFan] = TunnelFan;
 iscsShape[deviceType.FireDamper] = FireDamper;
+iscsShape[deviceType.SmookExhaustFd] = SmookExhaustFd;
 iscsShape[deviceType.SmookProofFd] = SmookProofFd;
 iscsShape[deviceType.BrakeMachine] = BrakeMachine;
 iscsShape[deviceType.EntranceGuard] = EntranceGuard;

src/iscs/utils/parser.js

@@ -106,6 +106,9 @@ export function parser(data) {
         zrUtil.each(data.fireDamperList || [], elem =>{
             iscsDevice[elem.code] = deviceFactory(deviceType.FireDamper, elem);
         } );
+        zrUtil.each(data.smookExhaustFdList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.SmookExhaustFd, elem);
+        } );
         zrUtil.each(data.smookProofFdList || [], elem =>{
             iscsDevice[elem.code] = deviceFactory(deviceType.SmookProofFd, elem);
         } );
@@ -245,6 +248,9 @@ export function updateIscsData(state, device) {
     case deviceType.FireDamper:
         updateIscsListByDevice(state, 'fireDamperList', device);
         break;
+    case deviceType.SmookExhaustFd:
+        updateIscsListByDevice(state, 'smookExhaustFdList', device);
+        break;
     case deviceType.SmookProofFd:
         updateIscsListByDevice(state, 'smookProofFdList', device);
         break;

src/views/iscs/iscsDraw/iscsBasOperate/fireDamper.vue

@@ -5,7 +5,13 @@
         <el-input v-model="form.code" :disabled="true" />
       </el-form-item>
       <el-form-item label="图形宽度" prop="width">
-        <el-input-number v-model="form.width" :min="40" />
+        <el-input-number v-model="form.width" :min="20" />
+      </el-form-item>
+      <el-form-item label="方向" prop="direction">
+        <el-select v-model="form.direction" placeholder="请选择类型">
+          <el-option label="横向" value="horizontal" />
+          <el-option label="竖向" value="vertical" />
+        </el-select>
       </el-form-item>
       <el-form-item label="X轴坐标" prop="x">
         <el-input-number v-model="form.x" controls-position="right" :min="1" />
@@ -33,6 +39,7 @@ export default {
             buttonText: '立即创建',
             form:{
                 code:'',
+                direction:'horizontal',
                 width: 40,
                 x: 10,
                 y: 10
@@ -69,6 +76,7 @@ export default {
                 this.form.width = model.width;
                 this.form.x = model.point.x;
                 this.form.y = model.point.y;
+                this.form.direction = model.direction;
             }
         }
     },
@@ -87,6 +95,7 @@ export default {
                         _type: 'FireDamper',
                         code: this.isUpdate ? this.form.code : getUID('FireDamper', this.iscs.fireDamperList),
                         width: this.form.width,
+                        direction:this.form.direction,
                         color:'#00ff00'
                     };
                     this.$emit('createFireDamper', fireDamperModel);
@@ -105,7 +114,8 @@ export default {
                 code:'',
                 width: 40,
                 x: 10,
-                y: 10
+                y: 10,
+                direction:'horizontal'
             };
             this.$refs.form.resetFields();
         },
@@ -118,6 +128,7 @@ export default {
                 _type: 'FireDamper',
                 code: this.form.code,
                 width: this.form.width,
+                direction:this.form.direction,
                 color:'#00ff00'
             };
             this.$emit('deleteDataModel', fireDamperModel );

src/views/iscs/iscsDraw/iscsBasOperate/index.vue

@@ -83,6 +83,14 @@
               @deleteDataModel="deleteDataModel"
             />
           </el-tab-pane>
+          <el-tab-pane label="排烟防火阀" name="SmookExhaustFd">
+            <smook-exhaust-fd
+              ref="smookExhaustFd"
+              style="width:90%"
+              @createSmookExhaustFd="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
           <el-tab-pane label="防烟防火阀" name="SmookProofFd">
             <smook-proof-fd
               ref="smookProofFd"
@@ -144,6 +152,7 @@ import VolumeControlDamper from './volumeControlDamper';
 import IscsLine from '../iscsCommonElem/line';
 import IscsText from '../iscsCommonElem/text';
 import IscsRect from '../iscsCommonElem/rect';
+import SmookExhaustFd from './smookExhaustFd';
 
 export default {
     name: 'IscsOperate',
@@ -157,6 +166,7 @@ export default {
         JetFan,
         TunnelFan,
         FireDamper,
+        SmookExhaustFd,
         SmookProofFd,
         VolumeControlDamper,
         IscsText,

src/views/iscs/iscsDraw/iscsBasOperate/smookExhaustFd.vue

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
+      <el-form-item v-if="isUpdate" label="编号" prop="code">
+        <el-input v-model="form.code" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="form.width" :min="20" />
+      </el-form-item>
+      <el-form-item label="方向" prop="direction">
+        <el-select v-model="form.direction" placeholder="请选择类型">
+          <el-option label="横向" value="horizontal" />
+          <el-option label="竖向" value="vertical" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="form.x" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="form.y" controls-position="right" :min="1" />
+      </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>
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+export default {
+    name:'SmookExhaustFd',
+    data() {
+        return {
+            isUpdate:false,
+            showDeleteButton: false,
+            buttonText: '立即创建',
+            form:{
+                code:'',
+                direction:'horizontal',
+                width: 40,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                code: [
+                    { required: true, message:'请生成设备图形的编码', trigger: 'blur' }
+                ],
+                width:[
+                    { required: true, message:'请输入设备图形宽度', trigger: 'blur' }
+                ],
+                x: [
+                    { required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }
+                ],
+                y: [
+                    { required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }
+                ]
+            }
+        };
+    },
+    computed:{
+        ...mapGetters('iscs', [
+            'iscs'
+        ])
+    },
+    watch:{
+        '$store.state.iscs.rightClickCount': function (val) {
+            const model = this.$store.getters['iscs/updateDeviceData'];
+            if (model._type === 'SmookExhaustFd' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.form.code = model.code;
+                this.form.width = model.width;
+                this.form.x = model.point.x;
+                this.form.y = model.point.y;
+                this.form.direction = model.direction;
+            }
+        }
+    },
+    mounted() {
+
+    },
+    methods:{
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const smookExhaustFdModel = {
+                        point: {
+                            x: this.form.x,
+                            y: this.form.y
+                        },
+                        _type: 'SmookExhaustFd',
+                        code: this.isUpdate ? this.form.code : getUID('SmookExhaustFd', this.iscs.smookExhaustFdList),
+                        width: this.form.width,
+                        direction:this.form.direction,
+                        color:'#00ff00'
+                    };
+                    this.$emit('createSmookExhaustFd', smookExhaustFdModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.form = {
+                code:'',
+                width: 40,
+                x: 10,
+                y: 10,
+                direction:'horizontal'
+            };
+            this.$refs.form.resetFields();
+        },
+        deleteDevice() {
+            const fireDamperModel = {
+                point: {
+                    x: this.form.x,
+                    y: this.form.y
+                },
+                _type: 'SmookExhaustFd',
+                code: this.form.code,
+                width: this.form.width,
+                direction:this.form.direction,
+                color:'#00ff00'
+            };
+            this.$emit('deleteDataModel', fireDamperModel );
+            this.initPage();
+        }
+    }
+};
+</script>