iscs 冷水机组，冷却塔组件布局

src/iscs/constant/deviceRender.js

@@ -45,7 +45,7 @@ deviceRender[deviceType.PlatformScreenDoor] = {
     z: 4
 };
 
-/** FrozenPump渲染配置 */
+/** 冷冻泵/冷却泵渲染配置 */
 deviceRender[deviceType.FrozenPump] = {
     _type: deviceType.FrozenPump,
     zlevel: 10,
@@ -59,4 +59,25 @@ deviceRender[deviceType.Vidicon] = {
     z: 4
 };
 
+/** 排风机渲染配置*/
+deviceRender[deviceType.Ventilator] = {
+    _type: deviceType.Ventilator,
+    zlevel: 1,
+    z: 4
+};
+
+/** 冷水机渲染配置*/
+deviceRender[deviceType.Chiller] = {
+    _type: deviceType.Chiller,
+    zlevel: 1,
+    z: 4
+};
+
+/** 冷却塔渲染配置*/
+deviceRender[deviceType.CoolTower] = {
+    _type: deviceType.CoolTower,
+    zlevel: 1,
+    z: 4
+};
+
 export default deviceRender;

src/iscs/constant/deviceType.js

@@ -7,7 +7,10 @@ const deviceType = {
     GasFireControl: 'gasFireControl',
     SmokeDetector: 'smokeDetector',
     TemperatureDetector: 'temperatureDetector',
-    PlatformScreenDoor: 'platformScreenDoor'
+    PlatformScreenDoor: 'platformScreenDoor',
+    Ventilator:'Ventilator',
+    Chiller:'Chiller',
+    CoolTower:'CoolTower'
 };
 
 export default deviceType;

src/iscs/shape/bas/chiller.js

@@ -0,0 +1,90 @@
+import Group from 'zrender/src/container/Group';
+import Circle from 'zrender/src/graphic/shape/Circle';
+import Polygon from 'zrender/src/graphic/shape/Polygon';
+import Polyline from 'zrender/src/graphic/shape/Polyline';
+export default class chiller 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]
+        });
+        this.rect = new Polygon({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape:{
+                points:[
+                    [0, 0],
+                    [this.model.width, 0],
+                    [this.model.width, this.model.width * 0.6],
+                    [0, this.model.width * 0.6],
+                    [0, 0]
+                ]
+            },
+            style: {
+                stroke:this.model.strokeColor,
+                lineWidth:2
+            }
+        });
+        this.circle1 = new Circle({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape: {
+                cx: this.model.width * 0.29,
+                cy: this.model.width * 0.18,
+                r: this.model.width * 0.1
+            },
+            style: {
+                fill: this.model.strokeColor
+            }
+        });
+        this.circle2 = new Circle({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape: {
+                cx: this.model.width * 0.68,
+                cy: this.model.width * 0.18,
+                r: this.model.width * 0.1
+            },
+            style: {
+                fill: this.model.strokeColor
+            }
+        });
+
+        this.polyline = new Polyline({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape:{
+                points:[
+                    [this.model.width * 0.37, this.model.width * 0.33],
+                    [this.model.width * 0.21, this.model.width * 0.33],
+                    [this.model.width * 0.29, this.model.width * 0.20],
+                    [this.model.width * 0.37, this.model.width * 0.33],
+                    [this.model.width * 0.59, this.model.width * 0.33],
+                    [this.model.width * 0.80, this.model.width * 0.33]
+                ]
+            },
+            style: {
+                stroke:this.model.strokeColor,
+                lineWidth:2
+            }
+        });
+        this.grouper.add(this.rect);
+        this.grouper.add(this.circle2);
+        this.grouper.add(this.circle1);
+        this.grouper.add(this.polyline);
+        this.add(this.grouper);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/factory.js

@@ -2,12 +2,15 @@ import ManualAlarmButton from './manualAlarmButton';
 import Vidicon from './Vidicon';
 import deviceType from '../constant/deviceType';
 import CheckBox from './checkBox';
-import FrozenPump from './frozenPump';
+import FrozenPump from './bas/frozenPump';
 import FireHydranAlarmButton from './fireHydrantAlarmButton';
 import GasFireControl from './gasFireControl';
 import SmokeDetector from './smokeDetector';
 import TemperatureDetector from './temperatureDetector';
 import PlatformScreenDoor from './psd/platformScreenDoor';
+import Ventilator from './bas/ventilator';
+import Chiller from './bas/chiller';
+import CoolTower from './bas/coolTower';
 
 const iscsShape = {};
 iscsShape[deviceType.ManualAlarmButton] = ManualAlarmButton;
@@ -19,6 +22,9 @@ iscsShape[deviceType.GasFireControl] = GasFireControl;
 iscsShape[deviceType.SmokeDetector] = SmokeDetector;
 iscsShape[deviceType.TemperatureDetector] = TemperatureDetector;
 iscsShape[deviceType.PlatformScreenDoor] = PlatformScreenDoor;
+iscsShape[deviceType.Ventilator] = Ventilator;
+iscsShape[deviceType.Chiller] = Chiller;
+iscsShape[deviceType.CoolTower] = CoolTower;
 
 function shapefactory(device, iscs) {
     const type = device.model._type;

src/iscs/utils/parser.js

@@ -64,6 +64,19 @@ export function parser(data) {
         zrUtil.each(data.platformScreenDoorList || [], elem =>{
             iscsDevice[elem.code] = deviceFactory(deviceType.PlatformScreenDoor, elem);
         });
+
+        zrUtil.each(data.ventilatorList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.Ventilator, elem);
+        });
+
+        zrUtil.each(data.chillerList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.Chiller, elem);
+        });
+
+        zrUtil.each(data.coolTowerList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.CoolTower, elem);
+        });
+
     }
 
     return iscsDevice;
@@ -108,6 +121,15 @@ export function updateIscsData(device) {
     case deviceType.FrozenPump :
         updateIscsListByDevice(iscsData, 'frozenPumpList', device);
         break;
+    case deviceType.Ventilator :
+        updateIscsListByDevice(iscsData, 'ventilatorList', device);
+        break;
+    case deviceType.Chiller :
+        updateIscsListByDevice(iscsData, 'chillerList', device);
+        break;
+    case deviceType.CoolTower :
+        updateIscsListByDevice(iscsData, 'coolTowerList', device);
+        break;
     }
 
     store.dispatch('iscs/setIscsData', iscsData);

src/views/system/iscsDraw/iscsBasOperate/chiller.vue

@@ -1,13 +1,11 @@
 <template>
   <div>
     <el-form ref="form" :rules="rules" :model="form" label-width="100px">
-      <el-form-item label="编号" prop="code">
+      <el-form-item v-if="isUpdate" label="编号" prop="code">
-        <el-input v-model="form.code" :disabled="true">
+        <el-input v-model="form.code" :disabled="true" />
-          <el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{ $t('ibp.generateCode') }}</el-button>
-        </el-input>
       </el-form-item>
       <el-form-item label="图形宽度" prop="width">
-        <el-input-number v-model="form.width" :min="20" />
+        <el-input-number v-model="form.width" :min="60" />
       </el-form-item>
       <el-form-item label="X轴坐标" prop="x">
         <el-input-number v-model="form.x" controls-position="right" :min="1" />
@@ -33,7 +31,7 @@ export default {
             buttonText: '立即创建',
             form:{
                 code:'',
-                width: 25,
+                width: 60,
                 x: 10,
                 y: 10
             },
@@ -83,7 +81,7 @@ export default {
                             y: this.form.y
                         },
                         _type: 'Chiller',
-                        code: this.form.code,
+                        code: this.isUpdate ? this.form.code : this.generateCode(),
                         width: this.form.width,
                         strokeColor:'#00ff00'
                     };
@@ -101,7 +99,7 @@ export default {
             this.showDeleteButton = false;
             this.form = {
                 code:'',
-                width: 25,
+                width: 60,
                 x: 10,
                 y: 10
             };
@@ -123,7 +121,7 @@ export default {
         },
         generateCode() {
             const mydate = new Date();
-            this.form.code = 'chiller_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
+            return 'chiller_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
         }
     }
 };

src/views/system/iscsDraw/iscsBasOperate/coolTower.vue

@@ -0,0 +1,128 @@
+<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="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>
+export default {
+    name:'CoolTower',
+    data() {
+        return {
+            isUpdate:false,
+            showDeleteButton: false,
+            buttonText: '立即创建',
+            form:{
+                code:'',
+                width: 25,
+                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:{
+
+    },
+    watch:{
+        '$store.state.ibp.rightClickCount': function (val) {
+            const model = this.$store.getters['ibp/updateDeviceData'];
+            if (model._type === 'CoolTower' ) {
+                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;
+            }
+        }
+    },
+    mounted() {
+
+    },
+    methods:{
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const chillerModel = {
+                        point: {
+                            x: this.form.x,
+                            y: this.form.y
+                        },
+                        _type: 'CoolTower',
+                        code: this.isUpdate ? this.form.code : this.generateCode(),
+                        width: this.form.width,
+                        strokeColor:'#00ff00'
+                    };
+                    this.$emit('createCoolTower', chillerModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.form = {
+                code:'',
+                width: 25,
+                x: 10,
+                y: 10
+            };
+            this.$refs.form.resetFields();
+        },
+        deleteDevice() {
+            const chillerModel = {
+                point: {
+                    x: this.form.x,
+                    y: this.form.y
+                },
+                _type: 'CoolTower',
+                code: this.form.code,
+                width: this.form.width,
+                fillColor:'#00ff00'
+            };
+            this.$emit('deleteDataModel', chillerModel );
+            this.initPage();
+        },
+        generateCode() {
+            const mydate = new Date();
+            return 'coolTower_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
+        }
+    }
+};
+</script>

src/views/system/iscsDraw/iscsBasOperate/frozenPump.vue

@@ -1,10 +1,8 @@
 <template>
   <div>
     <el-form ref="form" :rules="rules" :model="form" label-width="100px">
-      <el-form-item label="编号" prop="code">
+      <el-form-item v-if="isUpdate" label="编号" prop="code">
-        <el-input v-model="form.code" :disabled="true">
+        <el-input v-model="form.code" :disabled="true" />
-          <el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{ $t('ibp.generateCode') }}</el-button>
-        </el-input>
       </el-form-item>
       <el-form-item label="类型" prop="type">
         <el-select v-model="form.type" placeholder="请选择类型">
@@ -94,7 +92,7 @@ export default {
                             y: this.form.y
                         },
                         _type: 'FrozenPump',
-                        code: this.form.code,
+                        code: this.isUpdate ? this.form.code : this.generateCode(),
                         width: this.form.width,
                         strokeColor:'#00ff00',
                         pumpType:this.form.type
@@ -137,7 +135,7 @@ export default {
         },
         generateCode() {
             const mydate = new Date();
-            this.form.code = 'frozenPump_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
+            return 'frozenPump_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
         }
     }
 };

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

@@ -27,6 +27,23 @@
               @deleteDataModel="deleteDataModel"
             />
           </el-tab-pane>
+          <el-tab-pane label="冷却塔" name="coolTower">
+            <cool-tower
+              ref="coolTower"
+              style="width:90%"
+              @createCoolTower="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="排风机" name="ventilator">
+            <ventilator
+              ref="coolTower"
+              style="width:90%"
+              @createVentilator="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+
         </el-tabs>
       </el-card>
     </div>
@@ -36,11 +53,15 @@
 import {deviceFactory} from '@/iscs/utils/parser';
 import FrozenPump from './frozenPump';
 import Chiller from './chiller';
+import CoolTower from './coolTower';
+import Ventilator from './ventilator';
 export default {
     name: 'IscsOperate',
     components: {
         FrozenPump,
-        Chiller
+        Chiller,
+        CoolTower,
+        Ventilator
     },
     mixins: [
     ],

src/views/system/iscsDraw/iscsBasOperate/ventilator.vue

@@ -0,0 +1,128 @@
+<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="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>
+export default {
+    name:'Ventilator',
+    data() {
+        return {
+            isUpdate:false,
+            showDeleteButton: false,
+            buttonText: '立即创建',
+            form:{
+                code:'',
+                width: 25,
+                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:{
+
+    },
+    watch:{
+        '$store.state.ibp.rightClickCount': function (val) {
+            const model = this.$store.getters['ibp/updateDeviceData'];
+            if (model._type === 'Ventilator' ) {
+                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;
+            }
+        }
+    },
+    mounted() {
+
+    },
+    methods:{
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const chillerModel = {
+                        point: {
+                            x: this.form.x,
+                            y: this.form.y
+                        },
+                        _type: 'Ventilator',
+                        code: this.isUpdate ? this.form.code : this.generateCode(),
+                        width: this.form.width,
+                        strokeColor:'#00ff00'
+                    };
+                    this.$emit('createVentilator', chillerModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.form = {
+                code:'',
+                width: 25,
+                x: 10,
+                y: 10
+            };
+            this.$refs.form.resetFields();
+        },
+        deleteDevice() {
+            const chillerModel = {
+                point: {
+                    x: this.form.x,
+                    y: this.form.y
+                },
+                _type: 'Ventilator',
+                code: this.form.code,
+                width: this.form.width,
+                fillColor:'#00ff00'
+            };
+            this.$emit('deleteDataModel', chillerModel );
+            this.initPage();
+        },
+        generateCode() {
+            const mydate = new Date();
+            return 'ventilator_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
+        }
+    }
+};
+</script>