设施环境通用组件增加填写频率栏位

src/views/component/facility/facilityData.vue

@@ -25,32 +25,47 @@
                             <span v-else>{{ row.label|| '/' }}</span>
                         </template>
                     </el-table-column>
-                    <el-table-column label="参数单位" prop="unit">
+                    <el-table-column label="参数单位" prop="unit" width="120">
                         <template slot-scope="{row}">
                             <el-autocomplete
                                 v-if="!readonly && !isCul"
                                 v-model="row.unit"
                                 class="inline-input"
                                 :fetch-suggestions="querySearch"
-                                placeholder="请输入内容"
+                                placeholder="请输入"
                                 size="mini"
                             />
                             <span v-else>{{ row.unit || '/' }}</span>
                         </template>
                     </el-table-column>
 
-                    <el-table-column label="参数范围限值" prop="range">
+                    <el-table-column label="参数范围限值" prop="range" width="300">
                         <template slot-scope="{row}">
                             <NumberRange v-model="row.range" :precision="2" :disabled="readonly || isCul" /></template>
                     </el-table-column>
 
-                    <el-table-column label="参数修正值" prop="fixValue">
+                    <el-table-column label="参数修正值" prop="fixValue" width="120">
                         <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 label="填写频率" prop="rate">
+                        <template slot="header" slot-scope="">
+                            <el-tooltip class="item" effect="dark" content="配置参数填写周期，适用于参数填写频率与检测周期不一致的情况。若为空则表示该参数每次推送都需填写。" placement="top-start">
+                                <span>
+                                    填写频率
+                                    <i class="el-icon-question" />
+                                </span>
+                            </el-tooltip>
+                        </template>
+                        <template slot-scope="{row,$index}">
+                            <span>{{ row.rate || '/' }}</span>
+                            <el-button v-if="!readonly && !isCul" size="mini" icon="ibps-icon-edit" type="text" style="margin-left:10px" @click="openDialog(row,$index)">编辑</el-button>
+                        </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" />
@@ -72,13 +87,15 @@
                 </el-table>
             </el-col>
         </el-row>
+        <FacilityDataDialog v-if="dialogShow" :dialog-visible.sync="dialogShow" :params="dialogParams" @submit="dialogSubmit" />
     </div>
 </template>
 <script>
 import NumberRange from '@/views/component/xcomponent/numberRange.vue'
+import FacilityDataDialog from './facilityDataDialog.vue'
 export default {
     components: {
-        NumberRange
+        NumberRange, FacilityDataDialog
     },
     props: {
         formData: {
@@ -96,6 +113,8 @@ export default {
     },
     data () {
         return {
+            dialogParams: {},
+            dialogShow: false,
             isFirst: true,
             forms: [],
             multipleSelection: []
@@ -109,10 +128,10 @@ export default {
                 // console.log('formData', val)
                 if (val.lieBiaoShuJu) {
                     if (!this.isCul) {
-                        this.forms = JSON.parse(val.lieBiaoShuJu)
+                        this.forms = this.initData(val.lieBiaoShuJu)
                     } else {
                         if (this.isFirst) {
-                            this.forms = JSON.parse(val.lieBiaoShuJu)
+                            this.forms = this.initData(val.lieBiaoShuJu)
                             this.isFirst = false
                         }
                     }
@@ -135,9 +154,114 @@ export default {
         // console.log('mounted', this.formData)
     },
     methods: {
+        // 弹窗的提交事件
+        dialogSubmit (data, index) {
+            this.$set(this.forms, index, data)
+            // console.log('form', this.forms)
+        },
+        openDialog (row, $index) {
+            this.dialogParams = {
+                ...row,
+                $index
+            }
+            this.dialogShow = true
+        },
+        // 计算时间差
+        getDayDifference (date1, date2) {
+            // 将两个日期转换为Date对象
+            const d1 = new Date(date1)
+            const d2 = new Date(date2)
+            // 计算两个日期之间的毫秒差
+            const timeDiff = d2.getTime() - d1.getTime()
+            // 将毫秒差转换为天数并返回
+            const dayDiff = Math.ceil(timeDiff / (1000 * 3600 * 24))
+            // console.log(dayDiff)
+            return dayDiff
+        },
+        // 初始化数据
+        initData (data) {
+            const ans = JSON.parse(data)
+            const result = []
+            if (this.isFirst) {
+                console.log(ans)
+            }
+            ans.forEach(item => {
+                if (!Object.hasOwn(item, 'label')) {
+                    item.label = ''
+                }
+                if (!Object.hasOwn(item, 'unit')) {
+                    item.unit = '℃'
+                }
+                if (!Object.hasOwn(item, 'range')) {
+                    item.range = [null, null]
+                }
+                if (!Object.hasOwn(item, 'fixValue')) {
+                    item.fixValue = ''
+                }
+                if (!Object.hasOwn(item, 'value')) {
+                    item.value = ''
+                }
+                if (!Object.hasOwn(item, 'result')) {
+                    item.result = ''
+                }
+                if (!Object.hasOwn(item, 'rate')) {
+                    item.rate = ''
+                }
+                if (!Object.hasOwn(item, 'status')) {
+                    item.status = ''
+                }
+                if (!Object.hasOwn(item, 'period')) {
+                    item.period = ''
+                }
+                if (!Object.hasOwn(item, 'date')) {
+                    item.date = ''
+                }
+                if (!Object.hasOwn(item, 'startTime')) {
+                    item.startTime = ''
+                }
+
+                // this.formData.jianCeShiJian = '2024-09-05'
+                if (item.rate && this.formData.jianCeShiJian) {
+                    const jianCeShiJian = this.formData.jianCeShiJian.slice(0, 10)
+                    const thatDate = new Date(jianCeShiJian)
+                    const day = thatDate.getDay() // 周几
+                    const dayofMonth = thatDate.getDate() // 多少号
+                    let dayDiff = ''
+                    console.log(`监测时间：${jianCeShiJian},周${day}`)
+                    switch (item.period) {
+                        case 'day':
+                            if (item.date.indexOf(day) > -1) {
+                                result.push(item)
+                            }
+                            break
+                        case 'week':
+                            if (item.date === day) {
+                                result.push(item)
+                            }
+                            break
+                        case 'month':
+                            if (item.date === dayofMonth) {
+                                result.push(item)
+                            }
+                            break
+                        case 'repeat':
+                            dayDiff = this.getDayDifference(item.startTime, jianCeShiJian)
+                            if (dayDiff >= 0 && dayDiff % (item.date + 1) === 0) {
+                                result.push(item)
+                            }
+                            break
+                        default:
+                            break
+                    }
+                } else {
+                    result.push(item)
+                }
+            })
+            return result
+        },
         // 默认单位
         querySearch (queryString, cb) {
-            const units = [{ value: '℃' }, { value: '%' }, { value: 'Pa' }]
+            const units = [{ value: '℃' }, { value: '%' }, { value: 'Pa' }, { value: 'MΩ·CM' }, { value: 'uS/cm' }, { value: 'cfu/ml' }]
             // 调用 callback 返回建议列表的数据
             cb(units)
         },
@@ -190,7 +314,9 @@ export default {
                 value: '',
                 result: '',
                 status: '',
-                unit: ''
+                unit: '',
+                period: '',
+                date: ''
             })
         },
         goRemove () {

src/views/component/facility/facilityDataDialog.vue

@@ -0,0 +1,208 @@
+<template>
+    <el-dialog
+        :title="title"
+        :visible.sync="dialogVisible"
+        width="60%"
+        append-to-body
+        class="dialog"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :show-close="false"
+    >
+        <div class="contain">
+            <div class="form">
+                <el-form ref="formRef" :model="form" label-width="120" :rules="rules">
+                    <el-row class="item">
+                        <el-col>
+                            <el-form-item label="监测周期：" prop="period">
+                                <el-select v-model="form.period" placeholder="请选择" size="mini" :clearable="true" style="width:100%" @change="periodChange()">
+                                    <el-option
+                                        v-for="item in periodList"
+                                        :key="item.value"
+                                        :label="item.label"
+                                        :value="item.value"
+                                    />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row v-if="form.period" class="item">
+                        <el-col>
+                            <el-form-item label="监测频率：" prop="date">
+                                <el-select
+                                    v-if="form.period==='day' || form.period==='week'"
+                                    v-model="form.date"
+                                    :multiple="form.period==='day'"
+                                    placeholder="请选择"
+                                    size="mini"
+                                    style="width:100%"
+                                >
+                                    <el-option
+                                        v-for="item in weekDays"
+                                        :key="item.value"
+                                        :label="item.label"
+                                        :value="item.value"
+                                    />
+                                </el-select>
+                                <el-select v-if="form.period==='month'" v-model="form.date" placeholder="请选择" size="mini" style="width:100%">
+                                    <el-option
+                                        v-for="item in 28"
+                                        :key="item"
+                                        :label="`第${item}天`"
+                                        :value="item"
+                                    />
+                                </el-select>
+                                <div v-if="form.period==='repeat'" style="display:flex;align-items: center;width:100%">
+                                    <el-select v-model="form.date" placeholder="请选择" size="mini" style="width:100%">
+                                        <el-option
+                                            v-for="item in 30"
+                                            :key="item"
+                                            :label="`每隔${item}天`"
+                                            :value="item"
+                                        />
+                                    </el-select>
+                                </div>
+
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row v-if="form.period==='repeat'" class="item">
+                        <el-col>
+                            <el-form-item label="开始时间：" prop="startTime">
+                                <el-date-picker
+                                    v-model="form.startTime"
+                                    :clearable="false"
+                                    type="date"
+                                    placeholder="选择查询的月份"
+                                    :picker-options="pickerOptions"
+                                    value-format="yyyy-MM-dd"
+                                    size="mini"
+                                    style="width:100%"
+                                />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+
+            </div>
+        </div>
+        <span slot="footer" class="dialog-footer">
+            <el-button type="primary" size="mini" icon="ibps-icon-save" @click="handleConfirm">确 定</el-button>
+            <el-button size="mini" icon="ibps-icon-close" @click="handleClose">取 消</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+
+export default {
+    props: {
+        params: {
+            type: Object,
+            default: () => {}
+        },
+        dialogVisible: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data () {
+        return {
+            title: '',
+            rules: {
+                period: [
+                    { required: true, message: '请选择监测周期', trigger: 'blur' }
+                ],
+                date: [
+                    { required: true, message: '请选择查询的日期', trigger: 'blur' }
+                ],
+                startTime: [
+                    { required: true, message: '请选择开始时间', trigger: 'blur' }
+                ]
+            },
+            pickerOptions: {
+                disabledDate (time) {
+                    return time.getTime() < (Date.now() - (24 * 60 * 1000 * 60))
+                }
+            },
+            form: {
+                period: '',
+                date: '',
+                startTime: dayjs().format('YYYY-MM-DD')
+            },
+            periodList: [{ label: '日监测', value: 'day' }, { label: '周监测', value: 'week' }, { label: '月监测', value: 'month' }, { label: '按时间间隔监测', value: 'repeat' }],
+            weekDays: [{ label: '周一', value: 1 }, { label: '周二', value: 2 }, { label: '周三', value: 3 }, { label: '周四', value: 4 }, { label: '周五', value: 5 }, { label: '周六', value: 6 }, { label: '周日', value: 7 }]
+        }
+    },
+    mounted () {
+        this.form = this.params
+        if (!this.params.rate) {
+            this.title = '新增'
+        } else {
+            this.form = this.params
+            this.title = '修改'
+        }
+        // this.form = this.params
+    },
+    methods: {
+        handleClose () {
+            this.$emit('update:dialogVisible', false)
+        },
+        async handleConfirm () {
+            try {
+                await this.$refs.formRef.validate()
+                let rate = '每天'
+                switch (this.form.period) {
+                    case 'day':
+                        if (this.form.date.length !== 7) {
+                            this.form.date.sort((a, b) => a - b)
+                            rate = '每周' + this.form.date.join(',')
+                        }
+                        break
+                    case 'week':
+                        rate = '每周' + this.form.date
+                        break
+                    case 'month':
+                        rate = '每个月第' + this.form.date + '天'
+                        break
+                    case 'repeat':
+                        rate = this.form.startTime + '起每隔' + this.form.date + '天'
+                        break
+                    default:
+                        break
+                }
+                this.form.rate = rate
+                this.$emit('submit', this.form, this.params.$index)
+                this.handleClose()
+            } catch (error) {
+                console.log(error)
+            }
+        },
+        periodChange () {
+            if (this.form.period === 'day') {
+                this.form.date = []
+            } else {
+                this.form.date = ''
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.contain{
+    padding: 20px;
+    .form{
+        .item{
+            width: 600px;
+        }
+    }
+}
+
+::v-deep{
+    .el-form-item__content{
+        display: flex;
+    }
+}
+</style>