add:新增设施环境通用组件

src/views/component/facility/facilityData.vue

@@ -0,0 +1,196 @@
+<!--
+    author:luoaoxuan
+    subject:设施环境通用组件
+-->
+<template>
+    <div class="ficily-data">
+        <el-row type="flex">
+            <el-col style="margin:0 0 5px 0">
+                <div class="button">
+                    <el-button v-if="!isCul" type="danger" size="mini" @click="goRemove">删除</el-button>
+                    <el-button v-if="!isCul" type="success" size="mini" @click="goAdd">添加</el-button>
+                </div>
+            </el-col>
+        </el-row>
+        <el-row type="flex">
+            <el-col>
+                <el-table :data="forms" border @selection-change="handleSelectionChange">
+                    <el-table-column
+                        width="50"
+                        type="selection"
+                    />
+                    <el-table-column label="参数名称" prop="label">
+                        <template slot-scope="{row}">
+                            <el-input v-if="!readonly && !isCul" v-model="row.label" size="mini" placeholder="请输入" />
+                            <span v-else>{{ row.label|| '/' }}</span>
+                        </template>
+                    </el-table-column>
+
+                    <el-table-column label="参数范围限值" prop="range">
+                        <template slot-scope="{row}">
+                            <NumberRange v-model="row.range" :precision="2" :disabled="readonly || isCul" /></template>
+                    </el-table-column>
+
+                    <el-table-column label="参数修正值" prop="fixValue">
+                        <template slot-scope="{row}">
+                            <el-input v-if="!readonly && !isCul" v-model="row.fixValue" size="mini" placeholder="请输入" type="number" />
+                            <span v-else>{{ row.fixValue|| '/' }}</span>
+                        </template>
+                    </el-table-column>
+
+                    <el-table-column v-if="isCul" label="参数值" prop="value">
+                        <template slot-scope="{row}">
+                            <el-input v-if="!readonly" v-model="row.value" size="mini" placeholder="请输入" type="number" :readonly="readonly" />
+                            <span v-else>{{ row.value || '/' }}</span>
+                        </template>
+                    </el-table-column>
+
+                    <el-table-column v-if="isCul" label="最终值" prop="result">
+                        <template slot-scope="{row}">
+                            <span>{{ row.result || '/' }}</span>
+                        </template>
+                    </el-table-column>
+
+                    <el-table-column v-if="isCul" label="状态" prop="status">
+                        <template slot-scope="{row}">
+                            <span>{{ row.status || '/' }}</span>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+<script>
+import NumberRange from '@/views/component/xcomponent/numberRange.vue'
+export default {
+    components: {
+        NumberRange
+    },
+    props: {
+        formData: {
+            type: Object,
+            default: () => {}
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        isCul: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data () {
+        return {
+            isFirst: true,
+            forms: [],
+            multipleSelection: []
+        }
+    },
+    computed: {
+    },
+    watch: {
+        formData: {
+            handler (val) {
+                // console.log('formData', val)
+                if (val.lieBiaoShuJu) {
+                    if (!this.isCul) {
+                        this.forms = JSON.parse(val.lieBiaoShuJu)
+                    } else {
+                        if (this.isFirst) {
+                            this.forms = JSON.parse(val.lieBiaoShuJu)
+                            this.isFirst = false
+                        }
+                    }
+                }
+                this.culXiuZheng()
+            },
+            deep: true,
+            immediate: true
+        },
+        forms: {
+            handler (val) {
+                // console.log('forms', val)
+                this.culXiuZheng()
+                this.$emit('change-data', 'lieBiaoShuJu', JSON.stringify(val))
+            },
+            deep: true
+        }
+    },
+    mounted () {
+        // console.log('mounted', this.formData)
+    },
+    methods: {
+        // 计算状态
+        getStatus (range, result) {
+            let [min, max] = range
+            if (!min) min = -9999
+            if (!max) max = 9999
+            // console.log(min, max, result)
+            if (+min === 0 && +max === 0) {
+                return '正常'
+            }
+            if (+result <= +max && +result >= +min) {
+                return '正常'
+            }
+            return '失控'
+        },
+        // 计算修正值
+        culXiuZheng () {
+            if (!this.isCul) return
+            this.forms.forEach(item => {
+                if (item.value) {
+                    if (item.fixValue) {
+                        item.result = (+item.fixValue + +item.value).toFixed(2)
+                    } else {
+                        item.result = (+item.value).toFixed(2)
+                    }
+                    item.status = this.getStatus(item.range, item.result)
+                } else {
+                    item.result = ''
+                    item.status = ''
+                }
+            })
+        },
+        formatData (val) {
+            return JSON.stringify(val)
+        },
+        goAdd () {
+            if (this.forms.length >= 5) {
+                return this.$message({
+                    message: '超过最大限制！',
+                    type: 'warning'
+                })
+            }
+            this.forms.push({
+                label: '',
+                range: [],
+                fixValue: '',
+                value: '',
+                result: '',
+                status: ''
+            })
+        },
+        goRemove () {
+            this.forms = this.forms.filter(item => !this.multipleSelection.includes(item))
+        },
+        handleSelectionChange (val) {
+            this.multipleSelection = val
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.ficily-data{
+    margin-bottom: 20px;
+    .button{
+        display: flex;
+        flex-direction: row-reverse;
+        .el-button{
+            margin-left: 5px;
+        }
+    }
+
+}
+</style>

src/views/component/xcomponent/numberRange.vue

@@ -0,0 +1,208 @@
+<!--
+    author:luoaoxuan
+    subject:数字范围选择器
+-->
+<template>
+    <div>
+        <div class="input-number-range" :class="{ 'is-disabled': disabled }">
+            <div class="flex">
+                <div class="from">
+                    <el-input
+                        ref="input_from"
+                        v-model="userInputForm"
+                        size="mini"
+                        :readonly="disabled"
+                        placeholder=""
+                        @blur="handleBlurFrom"
+                        @focus="handleFocusFrom"
+                        @input="handleInputFrom"
+                        @change="handleInputChangeFrom"
+                    />
+                </div>
+                <div class="center">
+                    <span>至</span>
+                </div>
+                <div class="to">
+                    <el-input
+                        ref="input_to"
+                        v-model="userInputTo"
+                        size="mini"
+                        :readonly="disabled"
+                        placeholder=""
+                        @blur="handleBlurTo"
+                        @focus="handleFocusTo"
+                        @input="handleInputTo"
+                        @change="handleInputChangeTo"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'input-number-range',
+
+    props: {
+        value: {
+            required: true,
+            type: Array
+        },
+
+        // 是否禁用
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+
+        // 精度参数
+        precision: {
+            type: Number,
+            default: 0,
+            validator (val) {
+                return val >= 0 && val === parseInt(val, 10)
+            }
+        }
+    },
+
+    data () {
+        return {
+            userInputForm: null,
+            userInputTo: null
+        }
+    },
+
+    watch: {
+        value: {
+            immediate: true,
+            handler (value) {
+                if (value instanceof Array && this.precision !== undefined) {
+                    this.userInputForm = typeof value[0] === 'number' ? value[0] : null
+                    this.userInputTo = typeof value[1] === 'number' ? value[1] : null
+                }
+            }
+        }
+    },
+
+    methods: {
+    // 根据精度保留数字
+        toPrecision (num, precision) {
+            if (precision === undefined) precision = 0
+            return parseFloat(
+                Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision)
+            )
+        },
+
+        handleBlurFrom (event) {
+            this.$emit('blurfrom', event)
+        },
+
+        handleFocusFrom (event) {
+            this.$emit('focusfrom', event)
+        },
+
+        handleBlurTo (event) {
+            this.$emit('blurto', event)
+        },
+
+        handleFocusTo (event) {
+            this.$emit('focusto', event)
+        },
+
+        handleInputFrom (value) {
+            this.$emit('inputfrom', value)
+            // this.userInputFrom = value
+        },
+
+        handleInputTo (value) {
+            this.$emit('inputto', value)
+            // this.userInputTo = value
+        },
+
+        // from输入框change事件
+        handleInputChangeFrom (value) {
+            // 如果是非数字空返回null
+            if (isNaN(value) || value === '') {
+                this.$emit('input', [null, this.userInputTo])
+                this.$emit('changefrom', this.userInputForm)
+                return
+            }
+
+            // 初始化数字精度
+            this.userInputForm = this.setPrecisionValue(value)
+
+            // 如果from > to 将from值替换成to
+            if (typeof this.userInputTo === 'number') {
+                this.userInputForm =
+          parseFloat(this.userInputForm) <= parseFloat(this.userInputTo)
+              ? this.userInputForm
+              : this.userInputTo
+            }
+            this.$emit('input', [this.userInputForm, this.userInputTo])
+            this.$emit('changefrom', this.userInputForm)
+        },
+
+        // to输入框change事件
+        handleInputChangeTo (value) {
+            // 如果是非数字空返回null
+            if (isNaN(value) || value === '') {
+                this.$emit('input', [this.userInputForm, null])
+                this.$emit('changefrom', this.userInputTo)
+                return
+            }
+
+            // 初始化数字精度
+            this.userInputTo = this.setPrecisionValue(value)
+
+            if (typeof this.userInputForm === 'number') {
+                this.userInputTo =
+          parseFloat(this.userInputTo) >= parseFloat(this.userInputForm)
+              ? this.userInputTo
+              : this.userInputForm
+            }
+            this.$emit('input', [this.userInputForm, this.userInputTo])
+            this.$emit('changeto', this.userInputTo)
+        },
+
+        // 设置成精度数字
+        setPrecisionValue (value) {
+            if (this.precision !== undefined) {
+                const val = this.toPrecision(value, this.precision)
+                return val
+            }
+            return null
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+// 取消element原有的input框样式
+::v-deep .el-input--mini .el-input__inner {
+  border: 0px;
+  margin: 0;
+  padding: 0 15px;
+  background-color: transparent;
+}
+.input-number-range {
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+}
+.flex {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  .center {
+    margin-top: 1px;
+  }
+}
+.is-disabled {
+//   background-color: #eef0f6;
+//   border-color: #e4e7ed;
+//   color: #c0c4cc;
+  cursor: not-allowed;
+}
+</style>