iscs 冷水机组 组件

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

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
+      <el-form-item label="编号" prop="code">
+        <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-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:'Chiller',
+    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 === 'Chiller' ) {
+                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: 'Chiller',
+                        code: this.form.code,
+                        width: this.form.width,
+                        strokeColor:'#00ff00'
+                    };
+                    this.$emit('createChiller', 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: 'Chiller',
+                code: this.form.code,
+                width: this.form.width,
+                fillColor:'#00ff00'
+            };
+            this.$emit('deleteDataModel', chillerModel );
+            this.initPage();
+        },
+        generateCode() {
+            const mydate = new Date();
+            this.form.code = 'chiller_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
+        }
+    }
+};
+</script>

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

@@ -109,7 +109,7 @@ export default {
         },
         initPage() {
             this.isUpdate = false;
-            this.buttonText = this.$t('ibp.createNow');
+            this.buttonText = '立即创建';
             this.showDeleteButton = false;
             this.form = {
                 code:'',

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

@@ -19,6 +19,14 @@
               @deleteDataModel="deleteDataModel"
             />
           </el-tab-pane>
+          <el-tab-pane label="冷水机组" name="chiller">
+            <chiller
+              ref="chiller"
+              style="width:90%"
+              @createChiller="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
         </el-tabs>
       </el-card>
     </div>
@@ -27,10 +35,12 @@
 <script>
 import {deviceFactory} from '@/iscs/utils/parser';
 import FrozenPump from './frozenPump';
+import Chiller from './chiller';
 export default {
     name: 'IscsOperate',
     components: {
-        FrozenPump
+        FrozenPump,
+        Chiller
     },
     mixins: [
     ],