src/api/energyManagement/index.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/energyManagement/energyArea/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/energyManagement/energyPeriodTime/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/api/energyManagement/index.js
@@ -17,6 +17,23 @@ params: query, }) } // åºå-å页æ¥è¯¢ export function areaListPage(query) { return request({ url: '/electricityConsumptionArea/listPage', method: 'get', params: query, }) } // æ¶é´å¨æ-å页æ¥è¯¢ export function periodListPage(query) { return request({ url: '/electricityConsumptionPeriod/listPage', method: 'get', params: query, }) } // 设å¤è½è-å é¤ export function equipmentEnergyDelete(query) { return request({ @@ -25,10 +42,45 @@ data: query, }) } // åºå-å é¤ export function areaDelete(query) { return request({ url: '/electricityConsumptionArea/delete', method: 'delete', data: query, }) } // æ¶é´å¨æ-å é¤ export function periodDelete(query) { return request({ url: '/electricityConsumptionPeriod/delete', method: 'delete', data: query, }) } // 设å¤è½è-æ°å¢ export function equipmentEnergyAdd(query) { return request({ url: '/equipmentEnergyConsumption/add', method: 'post', data: query, }) } // åºå-æ°å¢ export function areaAdd(query) { return request({ url: '/electricityConsumptionArea/add', method: 'post', data: query, }) } // æ¶é´å¨æ-æ°å¢ export function periodAdd(query) { return request({ url: '/electricityConsumptionPeriod/add', method: 'post', data: query, }) @@ -41,6 +93,24 @@ data: query, }) } //åºå-ä¿®æ¹ export function areaUpdate(query) { return request({ url: '/electricityConsumptionArea/update', method: 'post', data: query, }) } // æ¶é´å¨æ-ä¿®æ¹ export function periodUpdate(query) { return request({ url: '/electricityConsumptionPeriod/update', method: 'post', data: query, }) } // 设å¤ä¸ææ¡æ¥è¯¢ export function deviceList(query) { return request({ src/views/energyManagement/energyArea/index.vue
¶Ô±ÈÐÂÎļþ @@ -0,0 +1,377 @@ <template> <div class="app-container"> <div class="search_form"> <div> <span class="search_title">åºååç§°ï¼</span> <el-input v-model="searchForm.areaName" style="width: 240px;margin-right: 30px" placeholder="请è¾å ¥" @change="handleQuery" clearable :prefix-icon="Search" /> <span class="search_title">åºåç±»åï¼</span> <el-input v-model="searchForm.areaType" style="width: 240px" placeholder="请è¾å ¥" @change="handleQuery" clearable :prefix-icon="Search" /> <el-button type="primary" @click="handleQuery" style="margin-left: 10px" >æç´¢</el-button > </div> <div> <el-button type="primary" @click="openForm('add')">æ°å¢</el-button> <el-button type="danger" plain @click="handleDelete">å é¤</el-button> </div> </div> <div class="table_list"> <PIMTable rowKey="id" :column="tableColumn" :tableData="tableData" :page="page" :isSelection="true" @selection-change="handleSelectionChange" :tableLoading="tableLoading" @pagination="pagination" ></PIMTable> </div> <el-dialog v-model="dialogFormVisible" title="åºå管ç" width="70%" @close="closeDia" > <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef" > <el-row :gutter="30"> <el-col :span="12"> <el-form-item label="åºååç§°ï¼" prop="areaName"> <el-input v-model="form.areaName" placeholder="请è¾å ¥" clearable @change="setName" :disabled="operationType !== 'add'" > <!-- <el-option v-for="item in areaTypeList" :key="item" :label="item" :value="item" > {{item}} </el-option> --> </el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="åºåç±»åï¼" prop="areaType"> <el-input v-model="form.areaType" placeholder="请è¾å ¥" clearable /> </el-form-item> </el-col> </el-row> <el-row :gutter="30"> <!-- <el-col :span="12"> <el-form-item label="è¿è¡æ¶é´ï¼" prop="runDate"> <el-date-picker style="width: 100%" v-model="form.runDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="date" placeholder="è¯·éæ©" clearable /> </el-form-item> </el-col> --> <el-col :span="12"> <el-form-item label="ç¶åºåï¼" prop="fuId"> <el-input v-model="form.fuId" placeholder="请è¾å ¥" clearable /> </el-form-item> </el-col> </el-row> </el-form> <template #footer> <div class="dialog-footer"> <el-button type="primary" @click="submitForm">确认</el-button> <el-button @click="closeDia">åæ¶</el-button> </div> </template> </el-dialog> </div> </template> <script setup> import {Search} from "@element-plus/icons-vue"; import {onMounted, ref} from "vue"; import {ElMessageBox} from "element-plus"; import {getToken} from "@/utils/auth.js"; import {areaListPage,areaDelete,areaAdd,areaUpdate} from "@/api/energyManagement/index.js"; const { proxy } = getCurrentInstance(); const data = reactive({ searchForm: { areaName: "", areaType: "" }, form: { areaName: "", areaType: "", fuId: "" } }); const { searchForm,form } = toRefs(data); const page = ref({ current: 1, size: 10, total: 0 }); const dialogFormVisible = ref(false); const selectedRows = ref([]); const operationType = ref(''); const tableData = ref([]); const emit = defineEmits(['close']) const tableLoading = ref(false); const tableColumn = ref([ { label: "åºååç§°", prop: "areaName", width: 200, }, { label: "åºåç±»å", prop: "areaType", width: 200, }, { label: "ç¶åºå", prop: "fuId", }, { dataType: "action", label: "æä½", align: "center", fixed: 'right', operation: [ { name: "ç¼è¾", type: "text", clickFun: (row) => { openForm("edit", row); }, }, ], }, ]); // è¡¨æ ¼éæ©æ°æ® const handleSelectionChange = (selection) => { selectedRows.value = selection; }; const formDia = ref() const upload = reactive({ // æ¯å¦æ¾ç¤ºå¼¹åºå±ï¼å®¢æ·å¯¼å ¥ï¼ open: false, // å¼¹åºå±æ é¢ï¼å®¢æ·å¯¼å ¥ï¼ title: "", // æ¯å¦ç¦ç¨ä¸ä¼ isUploading: false, // 设置ä¸ä¼ ç请æ±å¤´é¨ headers: { Authorization: "Bearer " + getToken() }, // ä¸ä¼ çå°å url: import.meta.env.VITE_APP_BASE_API + "/equipmentEnergyConsumption/importData", // æä»¶ä¸ä¼ åçåè° beforeUpload: (file) => { console.log('æä»¶å³å°ä¸ä¼ ', file); // å¯ä»¥å¨æ¤å¤åæä»¶ç±»åæå¤§å°æ ¡éª const isValid = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.name.endsWith('.xlsx') || file.name.endsWith('.xls'); if (!isValid) { proxy.$modal.msgError("åªè½ä¸ä¼ Excel æä»¶"); } return isValid; }, // æä»¶ç¶ææ¹åæ¶çåè° onChange: (file, fileList) => { console.log('æä»¶ç¶ææ¹å', file, fileList); }, // æä»¶ä¸ä¼ æåæ¶çåè° onSuccess: (response, file, fileList) => { console.log('ä¸ä¼ æå', response, file, fileList); if(response.code === 200){ proxy.$modal.msgSuccess("æä»¶ä¸ä¼ æå"); }else if(response.code === 500){ ElMessageBox.error(response.msg); }else{ ElMessageBox.warning(response.msg); } }, // æä»¶ä¸ä¼ 失败æ¶çåè° onError: (error, file, fileList) => { console.error('ä¸ä¼ 失败', error, file, fileList); ElMessageBox.error("æä»¶ä¸ä¼ 失败"); }, // æä»¶ä¸ä¼ è¿åº¦åè° onProgress: (event, file, fileList) => { console.log('ä¸ä¼ ä¸...', event.percent); } }); // æ¥è¯¢å表 /** æç´¢æé®æä½ */ const handleQuery = () => { page.current = 1; getList(); }; const pagination = (obj) => { page.current = obj.page; page.size = obj.limit; getList(); }; const getList = () => { tableLoading.value = true; areaListPage({ ...searchForm.value, ...page.value }).then((res) => { tableLoading.value = false; if (res && res.data) { tableData.value = res.data.records || []; page.total = res.data.total || 0; } else { tableData.value = []; page.total = 0; ElMessageBox.warning('æªè·åå°æ°æ®'); } }) .catch((err) => { tableLoading.value = false; console.error('æ°æ®å 载失败:', err); ElMessageBox.error('æ°æ®å 载失败ï¼è¯·éè¯'); }); }; // æå¼å¼¹æ¡ const openDialog = (type, row) => { operationType.value = type; dialogFormVisible.value = true; // form.value.maintainer = userStore.nickName; // form.value.maintenanceTime = getCurrentDate(); form.value = {} proxy.resetForm("formRef"); areaListPage().then((res) => { codeList.value = res.data; }); if (type === "edit") { form.value = {...row} } } // æå¼å¼¹æ¡ const openForm = (type, row) => { openDialog(type, row) }; // æäº¤è¡¨å const submitForm = () => { proxy.$refs["formRef"].validate(valid => { if (valid) { if (operationType.value === "add") { areaAdd(form.value).then(response => { proxy.$modal.msgSuccess("æ°å¢æå") closeDia() }) } else { areaUpdate(form.value).then(response => { proxy.$modal.msgSuccess("ä¿®æ¹æå") closeDia() }) } } }) } // å ³éå¼¹æ¡ const closeDia = () => { proxy.resetForm("formRef"); dialogFormVisible.value = false; emit('close') }; /** å¯¼å ¥æé®æä½ */ function handleImport() { upload.title = "设å¤è½è"; upload.open = true; // æ¸ ç©ºä¸æ¬¡ä¸ä¼ çæä»¶å表 nextTick(() => { proxy.$refs["uploadRef"]?.clearFiles(); }); } function importTemplate() { proxy.download( "/equipmentEnergyConsumption/export", {}, '设å¤è½èå¯¼å ¥æ¨¡ç.xlsx' ); } /** æäº¤ä¸ä¼ æä»¶ */ function submitFileForm() { proxy.$refs["uploadRef"].submit(); } /** å¼¹æ¡å ³éæ¶æ¸ 空æä»¶å表 */ function handleDialogClose() { nextTick(() => { proxy.$refs["uploadRef"]?.clearFiles(); }); } const handleDelete = () => { let ids = []; if (selectedRows.value.length > 0) { ids = selectedRows.value.map((item) => item.id); } else { proxy.$modal.msgWarning("è¯·éæ©æ°æ®"); return; } ElMessageBox.confirm("éä¸çå 容å°è¢«å é¤ï¼æ¯å¦ç¡®è®¤å é¤ï¼", "å é¤æç¤º", { confirmButtonText: "确认", cancelButtonText: "åæ¶", type: "warning", }) .then(() => { tableLoading.value = true; areaDelete(ids) .then((res) => { proxy.$modal.msgSuccess("å 餿å"); getList(); }) .finally(() => { tableLoading.value = false; }); }) .catch(() => { proxy.$modal.msg("已忶"); }); }; onMounted(() => { getList(); }); </script> <style scoped> </style> src/views/energyManagement/energyPeriodTime/index.vue
¶Ô±ÈÐÂÎļþ @@ -0,0 +1,480 @@ <template> <div class="app-container"> <!-- æç´¢æ --> <el-form :model="searchForm" :inline="true" class="search-form"> <el-form-item label="æ¶æ®µåç§°"> <el-input v-model="searchForm.periodName" placeholder="请è¾å ¥æ¶æ®µåç§°" clearable prefix-icon="Search" @change="handleQuery" /> </el-form-item> <el-form-item> <el-button type="primary" @click="handleQuery">æç´¢</el-button> <el-button @click="resetQuery">éç½®</el-button> </el-form-item> </el-form> <!-- æä½æé® --> <div class="table-actions"> <el-button type="primary" icon="Plus" @click="handleAdd" v-hasPermi="['energy:period:add']" >æ°å¢æ¶æ®µ</el-button> </div> <!-- æ¶æ®µåè¡¨è¡¨æ ¼ --> <el-table v-loading="loading" :data="periodList" @selection-change="handleSelectionChange" border > <el-table-column type="selection" width="55" align="center" /> <el-table-column label="åºå·" type="index" width="60" align="center" /> <el-table-column label="æ¶æ®µåç§°" prop="periodName" align="center" :show-overflow-tooltip="true" /> <el-table-column label="æ¶æ®µåä»·(å /度)" prop="price" align="center" :formatter="formatPrice" /> <el-table-column label="ç¶æ" prop="status" align="center" width="100" > <template #default="scope"> <dict-tag :options="statusOptions" :value="scope.row.status" /> </template> </el-table-column> <el-table-column label="å建æ¶é´" prop="createTime" align="center" width="180" /> <el-table-column label="æä½" align="center" width="200"> <template #default="scope"> <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['energy:period:edit']" >ä¿®æ¹</el-button> <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['energy:period:remove']" >å é¤</el-button> <el-button link type="primary" icon="Setting" @click="handleTimeConfig(scope.row)" v-hasPermi="['energy:period:config']" >æ¶é´é ç½®</el-button> </template> </el-table-column> </el-table> <!-- å页æ§ä»¶ --> <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" /> <!-- æ°å¢/ç¼è¾æ¶æ®µå¯¹è¯æ¡ --> <el-dialog :title="title" v-model="open" width="500px" append-to-body > <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" > <el-form-item label="æ¶æ®µåç§°" prop="periodName"> <el-input v-model="form.periodName" placeholder="请è¾å ¥æ¶æ®µåç§°" /> </el-form-item> <el-form-item label="æ¶æ®µåä»·(å /度)" prop="price"> <el-input v-model="form.price" type="number" placeholder="请è¾å ¥æ¶æ®µåä»·" step="0.01" min="0" /> </el-form-item> <el-form-item label="ç¶æ" prop="status"> <el-radio-group v-model="form.status"> <el-radio :label="1">å¯ç¨</el-radio> <el-radio :label="0">ç¦ç¨</el-radio> </el-radio-group> </el-form-item> <el-form-item label="夿³¨" prop="remark"> <el-input v-model="form.remark" type="textarea" placeholder="请è¾å ¥å¤æ³¨ä¿¡æ¯" rows="3" /> </el-form-item> </el-form> <template #footer> <div class="dialog-footer"> <el-button @click="cancel">åæ¶</el-button> <el-button type="primary" @click="submitForm">ç¡®å®</el-button> </div> </template> </el-dialog> <!-- æ¶é´æ®µé ç½®å¯¹è¯æ¡ --> <el-dialog title="å³°å¹³è°·å°æ¶é´é ç½®" v-model="timeConfigOpen" width="800px" append-to-body > <el-form ref="timeFormRef" :model="timeForm" label-width="100px"> <el-form-item label="æ¶æ®µåç§°"> <el-input v-model="timeForm.periodName" disabled /> </el-form-item> <el-table :data="timeForm.timeSegments" border style="width: 100%" @selection-change="handleTimeSelectionChange" > <el-table-column type="selection" width="55" align="center" /> <el-table-column label="åºå·" type="index" width="60" align="center" /> <el-table-column label="ç±»å" align="center" prop="segmentType" width="100"> <template #default="scope"> <el-select v-model="scope.row.segmentType" placeholder="è¯·éæ©"> <el-option label="å³°" value="peak" /> <el-option label="å¹³" value="flat" /> <el-option label="è°·" value="valley" /> <el-option label="å°" value="sharp" /> </el-select> </template> </el-table-column> <el-table-column label="å¼å§æ¶é´" align="center" prop="startTime" width="140"> <template #default="scope"> <el-time-picker v-model="scope.row.startTime" format="HH:mm" value-format="HH:mm" placeholder="éæ©å¼å§æ¶é´" /> </template> </el-table-column> <el-table-column label="ç»ææ¶é´" align="center" prop="endTime" width="140"> <template #default="scope"> <el-time-picker v-model="scope.row.endTime" format="HH:mm" value-format="HH:mm" placeholder="éæ©ç»ææ¶é´" /> </template> </el-table-column> <el-table-column label="æä½" align="center" width="100"> <template #default="scope"> <el-button link type="primary" icon="Delete" @click="handleTimeDelete(scope.row)" >å é¤</el-button> </template> </el-table-column> </el-table> <div style="margin-top: 15px; text-align: right;"> <el-button type="primary" @click="handleAddTimeSegment">æ°å¢æ¶é´æ®µ</el-button> </div> </el-form> <template #footer> <div class="dialog-footer"> <el-button @click="cancelTimeConfig">åæ¶</el-button> <el-button type="primary" @click="submitTimeConfig">ä¿åé ç½®</el-button> </div> </template> </el-dialog> </div> </template> <script setup name="EnergyPeriodTime"> import { ref, reactive, toRefs, getCurrentInstance, onMounted } from 'vue'; import { listPeriod, getPeriod, delPeriod, addPeriod, updatePeriod, getTimeSegments, saveTimeSegments } from "@/api/energyManagement/index.js"; import { useDict } from '@/hooks/useDict'; const { proxy } = getCurrentInstance(); const { sys_normal_disable } = useDict('sys_normal_disable'); import {Search} from "@element-plus/icons-vue"; import {onMounted, ref} from "vue"; import {ElMessageBox} from "element-plus"; import {getToken} from "@/utils/auth.js"; import {periodListPage,periodDelete,periodAdd,periodUpdate} from "@/api/energyManagement/index.js"; // ç¶æå®ä¹ const state = reactive({ loading: false, open: false, timeConfigOpen: false, title: "", total: 0, periodList: [], timeSegments: [], selectedRows: [], timeSelectedRows: [], statusOptions: sys_normal_disable, // æç´¢è¡¨å searchForm: { periodName: "" }, // æ¥è¯¢åæ° queryParams: { pageNum: 1, pageSize: 10, periodName: undefined }, // 表ååæ° form: { periodId: undefined, periodName: "", price: 0, status: 1, remark: "" }, // æ¶é´é 置表å timeForm: { periodId: undefined, periodName: "", timeSegments: [] }, // è¡¨åæ ¡éª rules: { periodName: [ { required: true, message: "请è¾å ¥æ¶æ®µåç§°", trigger: "blur" } ], price: [ { required: true, message: "请è¾å ¥æ¶æ®µåä»·", trigger: "blur" }, { type: "number", message: "请è¾å ¥ææçæ°å", trigger: "blur" }, { min: 0, message: "åä»·ä¸è½å°äº0", trigger: "blur" } ] } }); const { loading, open, timeConfigOpen, title, total, periodList, selectedRows, timeSelectedRows, statusOptions, searchForm, queryParams, form, timeForm, rules } = toRefs(state); const formRef = ref(null); const timeFormRef = ref(null); // çå½å¨æ - æè½½å®æ onMounted(() => { getList(); }); // è·åæ¶æ®µå表 const getList = async () => { state.loading = true; try { const response = await listPeriod(state.queryParams); state.periodList = response.rows; state.total = response.total; } catch (error) { proxy.$modal.msgError("è·åæ¶æ®µå表失败"); } finally { state.loading = false; } }; // æç´¢æé®ç¹å»äºä»¶ const handleQuery = () => { state.queryParams.pageNum = 1; state.queryParams.periodName = state.searchForm.periodName; getList(); }; // éç½®æé®ç¹å»äºä»¶ const resetQuery = () => { state.searchForm = { periodName: "" }; state.queryParams = { pageNum: 1, pageSize: 10, periodName: undefined }; getList(); }; // æ°å¢æé®ç¹å»äºä»¶ const handleAdd = () => { state.form = { periodId: undefined, periodName: "", price: 0, status: 1, remark: "" }; state.open = true; state.title = "æ°å¢æ¶æ®µ"; }; // ä¿®æ¹æé®ç¹å»äºä»¶ const handleUpdate = async (row) => { state.form = { ...row }; state.open = true; state.title = "ä¿®æ¹æ¶æ®µ"; }; // å 餿é®ç¹å»äºä»¶ const handleDelete = async (row) => { await proxy.$modal.confirm("æ¯å¦ç¡®è®¤å é¤è¯¥æ¶æ®µï¼"); try { await delPeriod(row.periodId); getList(); proxy.$modal.msgSuccess("å 餿å"); } catch (error) { proxy.$modal.msgError("å é¤å¤±è´¥"); } }; // æ¶é´æ®µé ç½®æé®ç¹å»äºä»¶ const handleTimeConfig = async (row) => { state.timeForm.periodId = row.periodId; state.timeForm.periodName = row.periodName; try { const response = await getTimeSegments(row.periodId); state.timeForm.timeSegments = response.data || []; } catch (error) { state.timeForm.timeSegments = []; } state.timeConfigOpen = true; }; // æ°å¢æ¶é´æ®µ const handleAddTimeSegment = () => { state.timeForm.timeSegments.push({ segmentId: undefined, periodId: state.timeForm.periodId, segmentType: "flat", startTime: "00:00", endTime: "00:00" }); }; // å 餿¶é´æ®µ const handleTimeDelete = (row) => { const index = state.timeForm.timeSegments.indexOf(row); if (index !== -1) { state.timeForm.timeSegments.splice(index, 1); } }; // æäº¤æ¶æ®µè¡¨å const submitForm = async () => { await proxy.$refs[formRef.value].validate(); try { if (state.form.periodId) { await updatePeriod(state.form); proxy.$modal.msgSuccess("ä¿®æ¹æå"); } else { await addPeriod(state.form); proxy.$modal.msgSuccess("æ°å¢æå"); } state.open = false; getList(); } catch (error) { proxy.$modal.msgError(state.form.periodId ? "ä¿®æ¹å¤±è´¥" : "æ°å¢å¤±è´¥"); } }; // æäº¤æ¶é´æ®µé ç½® const submitTimeConfig = async () => { try { await saveTimeSegments(state.timeForm.timeSegments); proxy.$modal.msgSuccess("æ¶é´é ç½®ä¿åæå"); state.timeConfigOpen = false; } catch (error) { proxy.$modal.msgError("æ¶é´é ç½®ä¿å失败"); } }; // åæ¶æé®ç¹å»äºä»¶ const cancel = () => { state.open = false; proxy.$refs[formRef.value].resetFields(); }; // åæ¶æ¶é´é ç½®æé®ç¹å»äºä»¶ const cancelTimeConfig = () => { state.timeConfigOpen = false; }; // 鿩项ååäºä»¶ const handleSelectionChange = (selection) => { state.selectedRows = selection; }; // æ¶é´æ®µéæ©é¡¹ååäºä»¶ const handleTimeSelectionChange = (selection) => { state.timeSelectedRows = selection; }; // æ ¼å¼åä»·æ ¼æ¾ç¤º const formatPrice = (row, column, cellValue) => { return cellValue ? cellValue.toFixed(2) : "0.00"; }; // å¯¼åºæ¹æ³ defineExpose({ getList }); </script> <style scoped> .search-form { margin-bottom: 16px; } .table-actions { margin-bottom: 16px; display: flex; justify-content: flex-start; } </style>