iscs 绘图代码调整

src/iscs/constant/deviceRender.js

@@ -333,4 +333,19 @@ deviceRender[deviceType.IscsTriangle] = {
     zlevel:1,
     z: 5
 };
+
+/** 福州 圆形 */
+deviceRender[deviceType.IscsCircle] = {
+    _type: deviceType.IscsCircle,
+    zlevel:1,
+    z: 5
+};
+
+/** 福州 屏蔽门 */
+deviceRender[deviceType.FuzhouPsd] = {
+    _type: deviceType.FuzhouPsd,
+    zlevel:1,
+    z: 5
+};
+
 export default deviceRender;

src/iscs/constant/deviceType.js

@@ -51,7 +51,9 @@ const deviceType = {
     CommunicationButcher: 'CommunicationButcher',
     AfcDoorUnite: 'AfcDoorUnite',
     RectText: 'RectText',
-    IscsTriangle:'IscsTriangle'
+    IscsTriangle:'IscsTriangle',
+    IscsCircle:'IscsCircle',
+    FuzhouPsd:'FuzhouPsd'
 };
 
 export default deviceType;

src/iscs/shape/factory.js

@@ -52,6 +52,8 @@ import CommunicationButcher from './communicationButcher';
 import AfcDoorUnite from './afcDoorUnite';
 import RectText from './rectText';
 import IscsTriangle from './iscsTriangle';
+import IscsCircle from './iscsCircle';
+import FuzhouPsd from './fuzhouPsd';
 
 const iscsShape = {};
 iscsShape[deviceType.ManualAlarmButton] = ManualAlarmButton;
@@ -108,6 +110,8 @@ iscsShape[deviceType.CommunicationButcher] = CommunicationButcher;
 iscsShape[deviceType.AfcDoorUnite] = AfcDoorUnite;
 iscsShape[deviceType.RectText] = RectText;
 iscsShape[deviceType.IscsTriangle] = IscsTriangle;
+iscsShape[deviceType.IscsCircle] = IscsCircle;
+iscsShape[deviceType.FuzhouPsd] = FuzhouPsd;
 
 function shapefactory(device, iscs) {
     const type = device.model._type;

src/iscs/shape/fuzhouPsd.js

@@ -0,0 +1,87 @@
+import Group from 'zrender/src/container/Group';
+import Rect from 'zrender/src/graphic/shape/Rect';
+
+export default class fuzhouPsd extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.z;
+        this._type = device.model._type;
+        this._code = device.model.code;
+        this.create();
+        this.setState(this.model);
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        this.fuzhouPsdBorder = new Rect({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x: 0,
+                y: 0,
+                width: this.model.height * 1.6,
+                height: this.model.height
+            },
+            style: {
+                fill: '#c48b19',
+                stroke: '#f00',
+                lineWidth: 0
+            }
+        });
+        this.fuzhouPsdLeft = new Rect({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x: 3 + (this.model.height * 1.6 - 8) * 0.15,
+                y: 3,
+                width: (this.model.height * 1.6 - 8) * 0.35,
+                height: this.model.height - 6
+            },
+            style: {
+                fill: '#33CC00',
+                stroke: '#000',
+                lineWidth: 1
+            }
+        });
+        this.fuzhouPsdRight = new Rect({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x: (this.model.height * 1.6 - 8) * 0.5 + 5,
+                y: 3,
+                width: (this.model.height * 1.6 - 8) * 0.35,
+                height: this.model.height - 6
+            },
+            style: {
+                fill: '#33CC00',
+                stroke: '#000',
+                lineWidth: 1
+            }
+        });
+        this.grouper.add(this.fuzhouPsdBorder);
+        this.grouper.add(this.fuzhouPsdLeft);
+        this.grouper.add(this.fuzhouPsdRight);
+        this.add(this.grouper);
+    }
+    setState(model) {
+        if (model.alarm) {
+            this.fuzhouPsdBorder.setStyle('lineWidth', 1);
+        }
+        if (model.noStatus) {
+            this.fuzhouPsdLeft.attr({shape:{x: 3}});
+            this.fuzhouPsdRight.attr({shape:{x: this.model.height * 1.04 - 0.2}});
+            this.fuzhouPsdBorder.setStyle('fill', '#0f96dc');
+            this.fuzhouPsdRight.setStyle('fill', '#0f96dc');
+            this.fuzhouPsdLeft.setStyle('fill', '#0f96dc');
+        }
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+
+}

src/iscs/shape/iscsCircle.js

@@ -0,0 +1,41 @@
+import Group from 'zrender/src/container/Group';
+import Circle from 'zrender/src/graphic/shape/Circle';
+
+export default class iscsCircle 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.z;
+        this.create();
+    }
+    create() {
+        const model = this.model;
+        this.grouper = new Group({
+            id: model.code,
+            position: [model.point.x, model.point.y]
+        });
+        this.iscsCircle = new Circle({
+            zlevel: model.zlevel,
+            z: model.z,
+            shape: {
+                cx:this.model.radius,
+                cy:this.model.radius,
+                r:this.model.radius
+            },
+            style: {
+                fill: this.model.fillColor,
+                stroke: this.model.strokeColor,
+                lineWidth: this.model.borderWidth
+            }
+        });
+        this.grouper.add(this.iscsCircle);
+        this.add(this.grouper);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/utils/parser.js

@@ -202,6 +202,12 @@ export function parser(data) {
         zrUtil.each(data.iscsTriangleList || [], elem=> {
             iscsDevice[elem.code] = deviceFactory(deviceType.IscsTriangle, elem);
         });
+        zrUtil.each(data.iscsCircleList || [], elem=> {
+            iscsDevice[elem.code] = deviceFactory(deviceType.IscsCircle, elem);
+        });
+        zrUtil.each(data.fuzhouPsdList || [], elem=> {
+            iscsDevice[elem.code] = deviceFactory(deviceType.FuzhouPsd, elem);
+        });
     }
 
     return iscsDevice;

src/views/iscs/iscsDraw/icscComponents/circle.vue

@@ -0,0 +1,147 @@
+<template>
+  <div style="overflow-y: scroll;height: calc(100% - 46px); width: 100%;">
+    <el-form ref="form" :rules="rules" :model="form" label-width="80px" style="width: 100%;padding: 10px 50px;">
+      <el-form-item label="半径:" prop="radius">
+        <el-input-number v-model="form.radius" controls-position="right" :min="5" size="small" />
+      </el-form-item>
+      <el-form-item label="填充色:" prop="fillColor">
+        <el-color-picker v-model="form.fillColor" show-alpha size="small" />
+      </el-form-item>
+      <el-form-item label="边框宽度:" prop="borderWidth">
+        <el-input-number v-model="form.borderWidth" controls-position="right" :min="0" size="small" />
+      </el-form-item>
+      <el-form-item label="边框色:" prop="strokeColor">
+        <el-color-picker v-model="form.strokeColor" size="small" />
+      </el-form-item>
+      <el-form-item label="X轴坐标:">
+        <el-input-number v-model="form.x" controls-position="right" :min="1" size="small" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标:">
+        <el-input-number v-model="form.y" controls-position="right" :min="1" size="small" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" size="small" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" size="small" type="danger" @click="deleteDevice">删除</el-button>
+        <el-button v-show="showDeleteButton" size="small" @click="initPage">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+export default {
+    name: 'IscsCircle',
+    components: {
+    },
+    data() {
+        return {
+            isUpdate: false,
+            buttonText: '立即创建',
+            showDeleteButton: false,
+            form: {
+                code: '',
+                fillColor: '',
+                borderWidth: '',
+                strokeColor: '',
+                radius: 10,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                strokeColor: [
+                    { required: true, message: '请选择边框颜色', trigger: 'change' }
+                ],
+                fillColor: [
+                    { required: true, message: '请选择圆填充颜色', trigger: 'change'}
+                ]
+            }
+        };
+    },
+    computed:{
+        ...mapGetters('iscs', [
+            'iscs'
+        ])
+    },
+    watch:{
+        '$store.state.iscs.rightClickCount': function (val) {
+            const model = this.$store.getters['iscs/updateDeviceData'];
+            if (model._type === 'IscsCircle' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.form.code = model.code;
+                this.form.fillColor = model.fillColor;
+                this.form.borderWidth = model.borderWidth;
+                this.form.strokeColor = model.strokeColor;
+                this.form.radius = model.radius;
+                this.form.x = model.point.x;
+                this.form.y = model.point.y;
+            }
+        }
+    },
+    mounted() {},
+    methods: {
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const rectModel = {
+                        point: {
+                            x: this.form.x,
+                            y: this.form.y
+                        },
+                        code: this.isUpdate ? this.form.code : getUID('IscsCircle', this.iscs.iscsCircleList),
+                        _type: 'IscsCircle',
+                        fillColor: this.form.fillColor,
+                        borderWidth: this.form.borderWidth,
+                        strokeColor: this.form.strokeColor,
+                        radius: this.form.radius
+                    };
+                    this.$emit('createDataModel', rectModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+        },
+        deleteDevice() {
+            const rectModel = {
+                point: {
+                    x: this.form.x,
+                    y: this.form.y
+                },
+                code: this.form.code,
+                _type: 'IscsCircle',
+                fillColor: this.form.fillColor,
+                borderWidth: this.form.borderWidth,
+                strokeColor: this.form.strokeColor,
+                radius: this.form.radius
+            };
+            this.$emit('deleteDataModel', rectModel);
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.form = {
+                code: '',
+                fillColor: '',
+                borderWidth: '',
+                strokeColor: '',
+                radius: 10,
+                x: 10,
+                y: 10
+            };
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+    .button_box{
+        width: 100%;
+        background: #f0f0f0;
+        overflow: hidden;
+    }
+</style>

src/views/iscs/iscsDraw/icscComponents/triangle.vue

@@ -106,7 +106,7 @@ export default {
                             x: this.form.x,
                             y: this.form.y
                         },
-                        code: this.isUpdate ? this.form.code : getUID('IscsTriangle', this.iscs.iscsRectList),
+                        code: this.isUpdate ? this.form.code : getUID('IscsTriangle', this.iscs.iscsTriangleList),
                         _type: 'IscsTriangle',
                         fillColor: this.form.fillColor,
                         borderWidth: this.form.borderWidth,

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

@@ -42,7 +42,7 @@
               @deleteDataModel="deleteDataModel"
             />
           </el-tab-pane>
-          <el-tab-pane label="扇门" name="ordinaryDoor">
+          <el-tab-pane label="扇门" name="OrdinaryDoor">
             <ordinary-door
               ref="ordinaryDoor"
               style="width: 100%;height: 100%;"
@@ -50,7 +50,7 @@
               @deleteDataModel="deleteDataModel"
             />
           </el-tab-pane>
-          <el-tab-pane label="门禁" name="fuzhouDoor">
+          <el-tab-pane label="门禁" name="FuzhouDoor">
             <fuzhou-door
               ref="fuzhouDoor"
               style="width: 100%;height: 100%;"
@@ -58,7 +58,7 @@
               @deleteDataModel="deleteDataModel"
             />
           </el-tab-pane>
-          <el-tab-pane label="通讯图符" name="communicationButcher">
+          <el-tab-pane label="通讯图符" name="CommunicationButcher">
             <communication-butcher
               ref="communication"
               style="width: 100%;height: 100%;"
@@ -66,7 +66,7 @@
               @deleteDataModel="deleteDataModel"
             />
           </el-tab-pane>
-          <el-tab-pane label="门禁单元" name="afcDoorUnite">
+          <el-tab-pane label="门禁单元" name="AfcDoorUnite">
             <afc-door-unite
               ref="afcDoorUnite"
               style="width: 100%; height: 100%;"
@@ -106,7 +106,7 @@ export default {
     ],
     data() {
         return {
-            enabledTab: 'PlatformScreenDoor',
+            enabledTab: 'IscsButton',
             data: '',
             stationCode: ''
         };

src/views/iscs/iscsDraw/iscsCommonElem/fuzhouPsd.vue

@@ -0,0 +1,110 @@
+<template>
+  <div style="overflow-y: scroll;height: calc(100% - 46px); width: 100%;">
+    <el-form ref="form" :rules="rules" :model="form" label-width="80px" style="width: 100%;padding: 10px 50px;">
+      <el-form-item label="门高:" prop="height">
+        <el-input-number v-model="form.height" controls-position="right" :min="20" size="small" />
+      </el-form-item>
+      <el-form-item label="X轴坐标:">
+        <el-input-number v-model="form.x" controls-position="right" :min="1" size="small" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标:">
+        <el-input-number v-model="form.y" controls-position="right" :min="1" size="small" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" size="small" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" size="small" type="danger" @click="deleteDevice">删除</el-button>
+        <el-button v-show="showDeleteButton" size="small" @click="initPage">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import {getUID} from '@/iscs/utils/Uid';
+import { mapGetters } from 'vuex';
+export default {
+    name: 'FuzhouPsd',
+    data() {
+        return {
+            form:{
+                code: '',
+                height:30,
+                x: 10,
+                y: 10
+            },
+            rules: {},
+            isUpdate: false,
+            buttonText: '立即创建',
+            showDeleteButton: false
+        };
+    },
+    computed:{
+        ...mapGetters('iscs', [
+            'iscs'
+        ])
+    },
+    watch:{
+        '$store.state.iscs.rightClickCount': function (val) {
+            const model = this.$store.getters['iscs/updateDeviceData'];
+            if (model._type === 'FuzhouPsd' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.form.code = model.code;
+                this.form.x = model.point.x;
+                this.form.y = model.point.y;
+                this.form.height = model.height;
+            }
+        }
+    },
+    mounted() {},
+    methods: {
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const model = {
+                        point: {
+                            x: this.form.x,
+                            y: this.form.y
+                        },
+                        code: this.isUpdate ? this.form.code : getUID('FuzhouPsd', this.iscs.fuzhouPsdList),
+                        _type: 'FuzhouPsd',
+                        height:this.form.height
+                    };
+                    this.$emit('createDataModel', model);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+        },
+        deleteDevice() {
+            const model = {
+                point: {
+                    x: this.form.x,
+                    y: this.form.y
+                },
+                code: this.form.code,
+                _type: 'FuzhouPsd',
+                height:this.form.height
+            };
+            this.$emit('deleteDataModel', model);
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.form = {
+                code: '',
+                height:30,
+                x: 10,
+                y: 10
+            };
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

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

@@ -50,9 +50,25 @@
               @deleteDataModel="deleteDataModel"
             />
           </el-tab-pane>
+          <el-tab-pane label="屏蔽门" name="FuzhouPsd">
+            <fuzhou-psd
+              ref="fuzhouPsd"
+              style="width: 100%;height: 100%;"
+              @createDataModel="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
           <el-tab-pane label="三角形" name="IscsTriangle">
             <iscs-triangle
-              ref="iscsRectText"
+              ref="iscsTriangle"
+              style="width: 100%;height: 100%;"
+              @createDataModel="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="圆形" name="IscsCircle">
+            <iscs-circle
+              ref="iscsCircle"
               style="width: 100%;height: 100%;"
               @createDataModel="createDataModel"
               @deleteDataModel="deleteDataModel"
@@ -69,8 +85,11 @@ import IscsLine from '../icscComponents/line';
 import IscsText from '../icscComponents/text';
 import IscsRect from '../icscComponents/rect';
 import IscsTriangle from '../icscComponents/triangle';
+import IscsCircle from '../icscComponents/circle';
 import IscsButton from '../icscComponents/button';
 import IscsRectText from '../iscsCommonElem/rectText';
+import FuzhouPsd from '../iscsCommonElem/fuzhouPsd';
+
 export default {
     name: 'IscsOperate',
     components: {
@@ -79,7 +98,9 @@ export default {
         IscsText,
         IscsButton,
         IscsRectText,
-        IscsTriangle
+        IscsTriangle,
+        IscsCircle,
+        FuzhouPsd
     },
     mixins: [
     ],