iscs 绘图代码调整

2020-05-07 18:15:13 +08:00 · 2020-05-07 18:15:13 +08:00 · 2084f4cf03
commit 2084f4cf03
parent e8820f82c4
9 changed files with 291 additions and 41 deletions
--- a/src/iscs/constant/deviceRender.js
+++ b/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,
--- a/src/iscs/constant/deviceType.js
+++ b/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',
--- a/src/iscs/shape/bas/fireDamper.js
+++ b/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],
-                    [this.model.width, this.model.width / 2],
-                    [0, this.model.width / 2],
+                    [polygonW, 0],
+                    [polygonW, polygonH],
+                    [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,
-                cy:this.model.width / 4,
-                r:this.model.width / 4
+                cx:polygonW / 2,
+                cy:polygonH / 2,
+                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) {
--- a/src/iscs/shape/bas/smookExhaustFd.js
+++ b/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;
+    }
+}
--- a/src/iscs/shape/factory.js
+++ b/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;
--- a/src/iscs/utils/parser.js
+++ b/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;
--- a/src/views/iscs/iscsDraw/iscsBasOperate/fireDamper.vue
+++ b/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 );
--- a/src/views/iscs/iscsDraw/iscsBasOperate/index.vue
+++ b/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,
--- a/src/views/iscs/iscsDraw/iscsBasOperate/smookExhaustFd.vue
+++ b/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>