From 34d2a583b619f07e534af5b31f9de8f26d8bbd5f Mon Sep 17 00:00:00 2001 From: dengzedong <dengzedong@email> Date: 星期四, 17 四月 2025 10:58:05 +0800 Subject: [PATCH] 预测项影响因素 --- src/views/model/pre/influenceFactor/MmPredictInfluenceFactorResult.vue | 108 ++++++++++++ src/utils/dict.ts | 3 src/views/model/pre/influenceFactor/index.vue | 196 +++++++++++++++++++++ src/api/model/pre/influenceFactor/influenceFactorApi.ts | 25 ++ src/views/model/pre/influenceFactor/MmPredictInfluenceFactorForm.vue | 200 ++++++++++++++++++++++ 5 files changed, 531 insertions(+), 1 deletions(-) diff --git a/src/api/model/pre/influenceFactor/influenceFactorApi.ts b/src/api/model/pre/influenceFactor/influenceFactorApi.ts new file mode 100644 index 0000000..89b7758 --- /dev/null +++ b/src/api/model/pre/influenceFactor/influenceFactorApi.ts @@ -0,0 +1,25 @@ +import request from '@/config/axios' + +export const getPage = (params) => { + return request.get({ url: '/model/pre/influence-factor/page', params }) +} + +export const getResultPage = (params) => { + return request.get({ url: '/model/pre/influence-factor/getResultPage', params }) +} + +export const getInfo = (id) => { + return request.get({ url: `/model/pre/influence-factor/get/${id}`}) +} + +export const create = (data) => { + return request.post({ url: '/model/pre/influence-factor/create', data }) +} + +export const update = (data) => { + return request.put({ url: '/model/pre/influence-factor/update', data }) +} + +export const deleteConfig = (id) => { + return request.delete({ url: '/model/pre/influence-factor/delete?id=' + id }) +} diff --git a/src/utils/dict.ts b/src/utils/dict.ts index 67631f5..a073307 100644 --- a/src/utils/dict.ts +++ b/src/utils/dict.ts @@ -197,5 +197,6 @@ MODEL_STATUS = 'model_status', ADJUST_DIRECTION = 'adjust_direction', ADJUST_TRIGGER_RULE = 'adjust_trigger_rule', - ADJUST_VALUE_RULE = 'adjust_value_rule' + ADJUST_VALUE_RULE = 'adjust_value_rule', + INFLUENCE_FACTOR_PATTERN = 'influence_factor_pattern', } diff --git a/src/views/model/pre/influenceFactor/MmPredictInfluenceFactorForm.vue b/src/views/model/pre/influenceFactor/MmPredictInfluenceFactorForm.vue new file mode 100644 index 0000000..8509a9e --- /dev/null +++ b/src/views/model/pre/influenceFactor/MmPredictInfluenceFactorForm.vue @@ -0,0 +1,200 @@ +<template> + <Dialog v-model="dialogVisible" :title="dialogTitle" width="50%"> + <el-form + ref="formRef" + v-loading="formLoading" + :model="formData" + :rules="formRules" + label-width="130px" + > + <el-row> + <el-col :span="12"> + <el-form-item label="预测项" prop="outputId"> + <el-select-v2 + v-model="formData.outputId" + :options="normalItemList || []" + placeholder="请选择预测项" + :props="{value:'value',label:'label',options:'children'}" + clearable + filterable + :fit-input-width="false" + /> + </el-form-item> + </el-col> + <el-col :span="6"> + <el-form-item label="统计方式" prop="pattern"> + <el-select v-model="formData.pattern" placeholder="请选择统计方式"> + <el-option + v-for="dict in getStrDictOptions(DICT_TYPE.INFLUENCE_FACTOR_PATTERN)" + :key="dict.value" + :label="dict.label" + :value="dict.value" + /> + </el-select> + </el-form-item> + </el-col> + <el-col :span="6"> + <el-form-item label="是否启用" prop="isEnable"> + <el-select v-model="formData.isEnable" placeholder="请选择"> + <el-option + v-for="dict in getIntDictOptions(DICT_TYPE.COM_IS_INT)" + :key="dict.value" + :label="dict.label" + :value="dict.value" + /> + </el-select> + </el-form-item> + </el-col> + </el-row> + <el-divider content-position="left">影响因素 + </el-divider> + <el-button + @click="addInfluenceFactor()" + type="primary" + size="small"> + 添加 + </el-button> + <el-table + :data="formData.influenceFactors" + border + style="width: 100%; margin-top: 5px;"> + <el-table-column prop="" label="因素预测项" align="center"> + <template #default="scope"> + <el-select-v2 + v-model="scope.row.factorOutputId" + :options="normalItemList || []" + placeholder="请选择" + :props="{value:'value',label:'label',options:'children'}" + clearable + filterable + :fit-input-width="false" + /> + </template> + </el-table-column> + <el-table-column prop="" label="偏差值" align="center"> + <template #default="scope"> + <el-input-number v-model="scope.row.deviationValue" :min="0" clearable/> + </template> + </el-table-column> + <el-table-column prop="" label="操作" width="80" align="center"> + <template #default="scope"> + <el-button + @click="deleteInfluenceFactor(scope.$index, formData.influenceFactors)" + type="text" + size="small"> + 删除 + </el-button> + </template> + </el-table-column> + </el-table> + </el-form> + <template #footer> + <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button> + <el-button @click="dialogVisible = false">取 消</el-button> + </template> + </Dialog> +</template> +<script lang="ts" setup> +import {DICT_TYPE, getIntDictOptions,getStrDictOptions} from "@/utils/dict"; +import * as MmPredictItem from '@/api/model/pre/item' +import * as InfluenceFactorApi from '@/api/model/pre/influenceFactor/influenceFactorApi' + +defineOptions({name: 'MmPredictInfluenceFactorForm'}) + +const {t} = useI18n() // 国际化 +const message = useMessage() // 消息弹窗 +const dialogVisible = ref(false) // 弹窗的是否展示 +const dialogTitle = ref('') // 弹窗的标题 +const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用 +const formType = ref('') // 表单的类型:create - 新增;update - 修改 +const formData = ref({ + id: undefined, + outputId: undefined, + pattern: undefined, + isEnable: 1, + influenceFactors: [] +}) +const formRules = reactive({ + outputId: [{required: true, message: '预测项不能为空', trigger: 'blur'}], + pattern: [{required: true, message: '统计方式不能为空', trigger: 'blur'}], +}) +const formRef = ref() // 表单 Ref + +const normalItemList = ref([]) + +/** 打开弹窗 */ +const open = async (type: string, id?: number) => { + dialogVisible.value = true + dialogTitle.value = t('action.' + type) + formType.value = type + resetForm() + + normalItemList.value = await MmPredictItem.getNormalItemList() + + // 修改时,设置数据 + if (id) { + formLoading.value = true + try { + formData.value = await InfluenceFactorApi.getInfo(id) + } finally { + formLoading.value = false + } + } + +} +defineExpose({open}) // 提供 open 方法,用于打开弹窗 + +/** 提交表单 */ +const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调 +const submitForm = async () => { + // 校验表单 + if (!formRef) return + const valid = await formRef.value.validate() + if (!valid) return + // 提交请求 + formLoading.value = true + try { + const data = formData.value + if (formType.value === 'create') { + await InfluenceFactorApi.create(data) + message.success(t('common.createSuccess')) + } else { + await InfluenceFactorApi.update(data) + message.success(t('common.updateSuccess')) + } + dialogVisible.value = false + // 发送操作成功的事件 + emit('success') + } finally { + formLoading.value = false + } +} + +/** 重置表单 */ +const resetForm = () => { + formData.value = { + id: undefined, + outputId: undefined, + pattern: undefined, + isEnable: 1, + influenceFactors: [] + } + formRef.value?.resetFields() +} + +function addInfluenceFactor() { + if (!formData.value.influenceFactors) { + formData.value.influenceFactors = [] + } + formData.value.influenceFactors.push({}) +} + +function deleteInfluenceFactor(index: string, rows) { + if (!rows || rows.length === 1) { + message.error('不能全部删除!') + return + } + rows.splice(index, 1) +} + +</script> diff --git a/src/views/model/pre/influenceFactor/MmPredictInfluenceFactorResult.vue b/src/views/model/pre/influenceFactor/MmPredictInfluenceFactorResult.vue new file mode 100644 index 0000000..3a73d22 --- /dev/null +++ b/src/views/model/pre/influenceFactor/MmPredictInfluenceFactorResult.vue @@ -0,0 +1,108 @@ +<template> + <Dialog v-model="dialogVisible" :title="dialogTitle" width="50%"> + <!-- 搜索工作栏 --> + <ContentWrap> + <el-form + class="-mb-15px" + :model="queryParams" + ref="queryFormRef" + :inline="true" + label-width="68px" + > + <el-form-item label="开始时间"> + <el-date-picker + v-model="queryParams.startTime" + format="YYYY-MM-DD HH:mm:ss" + value-format="YYYY-MM-DD HH:mm:ss" + type="datetime" + clearable + placeholder="选择日期时间"/> + </el-form-item> + <el-form-item label="结束时间"> + <el-date-picker + v-model="queryParams.endTime" + format="YYYY-MM-DD HH:mm:ss" + value-format="YYYY-MM-DD HH:mm:ss" + type="datetime" + clearable + placeholder="选择日期时间"/> + </el-form-item> + <el-form-item> + <el-button @click="getList"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> + </el-form-item> + </el-form> + </ContentWrap> + + <!-- 列表 --> + <ContentWrap> + <el-table + v-loading="loading" + :data="list" + row-key="id" + border + > + <el-table-column prop="time" label="影响时间" :formatter="dateFormatter"/> + <el-table-column prop="value" label="影响值"/> + </el-table> + <!-- 分页 --> + <Pagination + v-model:limit="queryParams.pageSize" + v-model:page="queryParams.pageNo" + :total="total" + @pagination="getList" + /> + </ContentWrap> + </Dialog> +</template> +<script lang="ts" setup> + import * as influenceFactorApi from '@/api/model/pre/influenceFactor/influenceFactorApi' + import {dateFormatter} from '@/utils/formatTime' + + + const { t } = useI18n() // 国际化 + const message = useMessage() // 消息弹窗 + + const dialogVisible = ref(false) // 弹窗的是否展示 + const dialogTitle = ref('历史结果') // 弹窗的标题 + + const loading = ref(true) // 列表的加载中 + const total = ref(0) // 列表的总页数 + const list = ref([]) // 字典表格数据 + const queryParams = reactive({ + pageNo: 1, + pageSize: 10, + factorId: undefined, + startTime: undefined, + endTime: undefined, + }) + + /** 打开弹窗 */ + const open = async (id) => { + dialogVisible.value = true + resetForm() + queryParams.factorId = id; + getList() + } + defineExpose({ open }) // 提供 open 方法,用于打开弹窗 + + const getList = async () => { + loading.value = true + try { + let data = await influenceFactorApi.getResultPage(queryParams) + + list.value = data.list + total.value = data.total + } finally { + loading.value = false + } + } + + /** 重置表单 */ + const resetForm = () => { + queryParams.pageNo = 1; + queryParams.pageSize = 10; + queryParams.factorId = undefined; + queryParams.startTime = undefined; + queryParams.endTime = undefined; + } +</script> diff --git a/src/views/model/pre/influenceFactor/index.vue b/src/views/model/pre/influenceFactor/index.vue new file mode 100644 index 0000000..6e5cb80 --- /dev/null +++ b/src/views/model/pre/influenceFactor/index.vue @@ -0,0 +1,196 @@ +<template> + <!-- 搜索 --> + <ContentWrap> + <el-form + class="-mb-15px" + :model="queryParams" + ref="queryFormRef" + :inline="true" + label-width="85px" + > + <el-form-item label="预测项名称" prop="outputName"> + <el-input + v-model="queryParams.outputName" + placeholder="请输入名称" + clearable + @keyup.enter="handleQuery" + class="!w-240px" + /> + </el-form-item> + <el-form-item label="统计方式" prop="pattern"> + <el-select v-model="queryParams.pattern" placeholder="请选择统计方式" clearable @keyup.enter="handleQuery" class="!w-240px"> + <el-option + v-for="dict in getStrDictOptions(DICT_TYPE.INFLUENCE_FACTOR_PATTERN)" + :key="dict.value" + :label="dict.label" + :value="dict.value" + /> + </el-select> + </el-form-item> + <el-form-item> + <el-button @click="handleQuery"> + <Icon icon="ep:search" class="mr-5px" /> + 搜索 + </el-button> + <el-button @click="resetQuery"> + <Icon icon="ep:refresh" class="mr-5px" /> + 重置 + </el-button> + <el-button + type="primary" + plain + @click="openForm('create')" + v-hasPermi="['pre:influence-factor:create']" + > + <Icon icon="ep:plus" class="mr-5px" /> + 新增 + </el-button> + </el-form-item> + </el-form> + </ContentWrap> + + <!-- 列表 --> + <ContentWrap> + <el-table v-loading="loading" :data="list"> + <el-table-column label="预测项名称" header-align="center" align="center" prop="outputName" fixed/> + <el-table-column label="统计方式" align="center" prop="pattern"> + <template #default="scope"> + <dict-tag :type="DICT_TYPE.INFLUENCE_FACTOR_PATTERN" :value="scope.row.pattern" /> + </template> + </el-table-column> + <el-table-column label="是否启用" header-align="center" align="center" min-width="100" prop="isEnable" > + <template #default="scope"> + <dict-tag :type="DICT_TYPE.COM_IS_INT" :value="scope.row.isEnable" /> + </template> + </el-table-column> + <el-table-column prop="createTime" align="center" label="创建时间" :formatter="dateFormatter"/> + <el-table-column label="影响因素" type="expand" width="100px"> + <template #default="props"> + <el-table :data="props.row.influenceFactors"> + <el-table-column align="center" label="因素名称" prop="factorOutputName" /> + <el-table-column align="center" label="偏差值" prop="deviationValue" /> + <el-table-column prop="" label="操作" align="center"> + <template #default="scope"> + <el-button + @click="showResult(scope.row.id)" + type="text"> + 查看结果 + </el-button> + </template> + </el-table-column> + </el-table> + </template> + </el-table-column> + <el-table-column label="操作" align="center" fixed="right"> + <template #default="scope"> + <el-button + link + type="primary" + @click="openForm('update', scope.row.id)" + v-hasPermi="['pre:influence-factor:update']" + > + 编辑 + </el-button> + <el-button + link + type="danger" + @click="handleDelete(scope.row.id)" + v-hasPermi="['pre:influence-factor:delete']" + > + 删除 + </el-button> + </template> + </el-table-column> + </el-table> + <!-- 分页 --> + <Pagination + :total="total" + v-model:page="queryParams.pageNo" + v-model:limit="queryParams.pageSize" + @pagination="getList" + /> + </ContentWrap> + + <!-- 表单弹窗:添加/修改 --> + <MmPredictInfluenceFactorForm ref="formRef" @success="getList" /> + <!-- 历史结果 --> + <MmPredictInfluenceFactorResult ref="resultRef" /> + +</template> +<script lang="ts" setup> +import MmPredictInfluenceFactorForm from './MmPredictInfluenceFactorForm.vue' +import MmPredictInfluenceFactorResult from './MmPredictInfluenceFactorResult.vue' +import * as influenceFactorApi from '@/api/model/pre/influenceFactor/influenceFactorApi' +import {dateFormatter} from '@/utils/formatTime' +import {DICT_TYPE, getIntDictOptions,getStrDictOptions} from "@/utils/dict"; + +defineOptions({name: 'influenceFactor'}) + + const message = useMessage() // 消息弹窗 + const {t} = useI18n() // 国际化 + + const loading = ref(true) // 列表的加载中 + const total = ref(0) // 列表的总页数 + const list = ref([]) // 列表的数据 + const queryParams = reactive({ + pageNo: 1, + pageSize: 10, + outputName: undefined, + pattern: undefined, + }) + const queryFormRef = ref() // 搜索的表单 + + /** 查询列表 */ + const getList = async () => { + loading.value = true + try { + const page = await influenceFactorApi.getPage(queryParams) + list.value = page.list + total.value = page.total + } finally { + loading.value = false + } + } + + /** 搜索按钮操作 */ + const handleQuery = () => { + queryParams.pageNo = 1 + getList() + } + + /** 重置按钮操作 */ + const resetQuery = () => { + queryFormRef.value.resetFields() + handleQuery() + } + + /** 添加/修改操作 */ + const formRef = ref() + const openForm = (type: string, id?: number) => { + formRef.value.open(type, id) + } + + /** 删除按钮操作 */ + const handleDelete = async (id: number) => { + try { + // 删除的二次确认 + await message.delConfirm() + // 发起删除 + await influenceFactorApi.deleteConfig(id) + message.success(t('common.delSuccess')) + // 刷新列表 + await getList() + } catch { + } + } + /** 展示影响结果 */ + const resultRef = ref() + const showResult = (id) => { + resultRef.value.open(id) + } + + /** 初始化 **/ + onMounted(async () => { + await getList() + }) +</script> -- Gitblit v1.9.3