From 64956122c1a7beb2a2d49c54449319dd20b4f4c1 Mon Sep 17 00:00:00 2001
From: waibao2 <1@qq.com>
Date: Fri, 24 Oct 2025 16:57:46 +0800
Subject: [PATCH] =?UTF-8?q?docs:=E9=99=8D=E9=9B=A8=E9=A2=84=E8=AD=A6?=
 =?UTF-8?q?=E7=AD=89=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/basic/rainLevel/index.vue | 292 ++++++++++++++++++++++++++++
 1 file changed, 292 insertions(+)
 create mode 100644 src/views/basic/rainLevel/index.vue

diff --git a/src/views/basic/rainLevel/index.vue b/src/views/basic/rainLevel/index.vue
new file mode 100644
index 0000000..0f53de9
--- /dev/null
+++ b/src/views/basic/rainLevel/index.vue
@@ -0,0 +1,292 @@
+<template>
+    <div class="app-container app-container-bg">
+        <el-card class="first-card" ref='firstCard' shadow="always">
+            <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
+                <el-form-item label="测站名称" prop="stnm">
+                    <el-input v-model="queryParams.stnm" placeholder="请输入测站名称" clearable @keyup.enter.native="handleQuery" style="width:240px" />
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+        <div class="el-card-p card-shadow carder-border mt10 pad10 ">
+            <el-table class="table-box" v-table-height v-loading="loading" :data="rainLevel">
+                <el-table-column type="index" width="55" :align="alignment" label="序号" />
+                <el-table-column label="测站名称" :align="alignment" prop="stnm" />
+                <el-table-column label="状态" :align="alignment">
+                    <template #default="scope">
+                        <div v-if="scope.row.levelList.length > 0"><el-tag type="success">已配置</el-tag></div>
+                        <div v-else><el-tag>未配置</el-tag></div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" :align="alignment" class-name="small-padding fixed-width">
+                    <template #default="scope">
+                        <el-button type="text" icon="Edit" @click="handleUpdate(scope.row)">配置</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.limit" @pagination="getList" />
+        </div>
+        <el-dialog class="custom-dialog" :title="title" v-model="open" width="790px" append-to-body>
+            <div>
+                <el-button type="primary" class="mb10 mr20" @click="addEvent">新增</el-button>
+                <span style="font-size: 12px;color:#ccc">点击表格行修改数据</span>
+            </div>
+            <vxe-grid ref='gridRef' v-bind="gridOptions">
+                <template #action="{ row }">
+                    <el-button text type="danger" @click="handleRemoveRow(row)">删除</el-button>
+                </template>
+            </vxe-grid>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button type="primary" @click="submitForm(formRef)" v-loading='btnLoading'>确 定</el-button>
+                    <el-button @click="cancel">取 消</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script setup>
+    import { ref, reactive, onMounted, } from 'vue'
+    import dayjs from 'dayjs'
+    const { proxy } = getCurrentInstance()
+    const alignment = 'center'
+    const queryParams = reactive({
+        page: 1,
+        limit: 10,
+        stnm: '',
+    })
+    const loading = ref(false)
+    const total = ref(0)
+    const rainLevel = ref([])
+    const getList = async () => {
+        loading.value = true;
+        try {
+            const res = await proxy.axiosGet('/basic/rainLevel/full_data', queryParams)
+            if (res.code == 0) {
+                rainLevel.value = res.data
+                total.value = rainLevel.value.length
+            }
+        } catch (error) {
+
+        } finally {
+            loading.value = false
+        }
+    }
+    /** 搜索按钮操作 */
+    const handleQuery = () => {
+        queryParams.pageNum = 1
+        getList()
+    }
+    const resetQuery = () => {
+        proxy.resetForm("queryForm");
+        handleQuery();
+    }
+
+    const form = reactive({})
+    const open = ref(false)
+    const title = ref("")
+    /** 配置按钮操作 */
+    const handleUpdate = async (row) => {
+        open.value = true;
+        title.value = row.stnm + "降雨预警等级配置项";
+        gridOptions.data = row.levelList
+        Object.assign(form, row)
+    }
+    /*************************************************************  弹窗  ***************************************/
+    // 选择级别下拉框
+    const levelValuesEditRender = reactive({
+        name: 'VxeSelect',
+        options: [
+            {
+                value: 1,
+                label: '一级'
+            },
+            {
+                value: 2,
+                label: '二级'
+            },
+            {
+                value: 3,
+                label: '三级'
+            },
+            {
+                value: 4,
+                label: '四级'
+            },
+            {
+                value: 5,
+                label: '五级'
+            }
+        ],
+    })
+    // 选择间隔下拉框
+    const levelTimeEditRender = reactive({
+        name: 'VxeSelect',
+        options: [
+            {
+                value: 1,
+                label: '1小时'
+            },
+            {
+                value: 3,
+                label: '3小时'
+            },
+            {
+                value: 6,
+                label: '6小时'
+            },
+            {
+                value: 12,
+                label: '12小时'
+            },
+            {
+                value: 24,
+                label: '24小时'
+            }
+        ],
+
+    })
+    const yujingColor = ['#fffde6', '#fff3e6', '#ffeee6', '#ffe6e6', '#f2e6ff']
+    const gridOptions = reactive({
+        border: true,
+        align: 'center',
+        showOverflow: true,
+        showHeader: true,
+        height: 500,
+        editConfig: {
+            trigger: 'click',
+            mode: 'row',
+        },
+        // rowStyle({ rowIndex, row }) {
+        //     if (row && row.levelValue) {
+        //         // levelValue 是 1-5，数组索引是 0-4，所以需要减1
+        //         const colorIndex = row.levelValue - 1;
+        //         if (colorIndex >= 0 && colorIndex < yujingColor.length) {
+        //             return {
+        //                 backgroundColor: yujingColor[colorIndex],
+
+        //             }
+        //         }
+        //     }
+        //     return {}
+
+        // },
+        editRules: {
+            levelValue: [
+                { required: true, message: '必须选择' }
+            ],
+            value: [
+                { required: true, message: '必须填写' }
+            ],
+            levelTime: [
+                { required: true, message: '必须选择' }
+            ],
+        },
+        columns: computed(() => {
+            // 基础列配置
+            const baseColumns = [
+                { type: 'seq', width: 55 },
+                { field: 'levelValue', title: '选择级别', width: 200, editRender: levelValuesEditRender },
+                { field: 'levelTime', title: '选择间隔', width: 200, editRender: levelTimeEditRender },
+                { field: 'value', title: '输入阈值', width: 200, editRender: { name: 'VxeNumberInput' } },
+            ];
+
+            // 如果不是详情模式，则添加操作列
+            if (gridOptions.data && gridOptions.data.length > 1) {
+                baseColumns.push({ field: 'action', title: '操作', width: 80, slots: { default: 'action' } });
+            }
+
+            return baseColumns;
+        }),
+        data: []
+    })
+    // 更新表格
+    const updateGridData = () => {
+        const $grid = gridRef.value;
+        if ($grid) {
+            const tableData = $grid.getTableData().tableData;
+            gridOptions.data = tableData;
+            return tableData;
+        }
+        return [];
+    }
+    const gridRef = ref()
+    const addEvent = async () => {
+        const $grid = gridRef.value
+        if ($grid) {
+            const valid = await $grid.validate(true) // 验证所有行
+            console.log(valid, 'valid')
+            if (valid) {
+                proxy.$modal.msgWarning("请先填写完整当前行数据");
+                return;
+            } else {
+                const record = {
+                    alarmOpen: 1
+                }
+                const { row: newRow } = await $grid.insert(record)
+                // 激活不自动聚焦
+                $grid.setEditRow(newRow)
+                // 激活并自动聚焦
+                // $grid.setEditRow(newRow, 'name')
+                // 激活并自动聚焦
+                // $grid.setEditCell(newRow, 'name')
+                updateGridData();
+            }
+
+        }
+    }
+    const handleRemoveRow = async (row) => {
+        const $grid = gridRef.value
+        if ($grid) {
+            await $grid.remove(row)
+            updateGridData();
+        }
+    }
+
+    // 取消按钮
+    const cancel = () => {
+        open.value = false;
+    }
+    /** 提交按钮 */
+    const submitForm = async (formEl) => {
+        // 验证表格中的所有数据
+        const $grid = gridRef.value;
+        if ($grid) {
+            const validResult = await $grid.validate(true);
+            if (validResult) {
+                proxy.$modal.msgWarning("请填写完整配置信息");
+                return;
+            }
+            form.levelList = updateGridData();
+        }
+        configMethod();
+    }
+    const btnLoading = ref(false)
+    // 新增方法
+    const configMethod = async () => {
+        btnLoading.value = true
+        try {
+            let res = await proxy.axiosPost('/basic/rainLevel/edit', form);
+            if (res.code === 0) {
+                proxy.$modal.msgSuccess("配置成功");
+                open.value = false;
+                getList();
+                btnLoading.value = false
+            }
+        } catch (error) {
+            btnLoading.value = false
+        }
+    }
+
+    onMounted(() => {
+        getList()
+    })
+</script>
+<style scoped lang="scss">
+    :deep(.custom-dialog .el-dialog__body) {
+        padding-bottom: 0 !important;
+    }
+</style>
\ No newline at end of file