1.能源管理-开发、联调

gaoluyang

昨天 d0a1fff347476b7deb83b4656acb08a8af67a351

1.能源管理-开发、联调

 src/api/energyManagement/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,50 @@
// èƒ½æºç®¡ç†
import request from "@/utils/request";

// è®¾å¤‡èƒ½è€—-分页查询
export function equipmentEnergyListPage(query) {
  return request({
    url: '/equipmentEnergyConsumption/listPage',
    method: 'get',
    params: query,
  })
}
// -能源趋势-分页查询
export function listPageByTrend(query) {
  return request({
    url: '/equipmentEnergyConsumption/listPageByTrend',
    method: 'get',
    params: query,
  })
}
// è®¾å¤‡èƒ½è€—-删除
export function equipmentEnergyDelete(query) {
  return request({
    url: '/equipmentEnergyConsumption/delete',
    method: 'delete',
    data: query,
  })
}
// è®¾å¤‡èƒ½è€—-新增
export function equipmentEnergyAdd(query) {
  return request({
    url: '/equipmentEnergyConsumption/add',
    method: 'post',
    data: query,
  })
}
// è®¾å¤‡èƒ½è€—-修改
export function equipmentEnergyUpdate(query) {
  return request({
    url: '/equipmentEnergyConsumption/update',
    method: 'post',
    data: query,
  })
}
// è®¾å¤‡ä¸‹æ‹‰æ¡†æŸ¥è¯¢
export function deviceList(query) {
  return request({
    url: '/equipmentEnergyConsumption/deviceList',
    method: 'get',
  })
}

 src/views/energyManagement/energyPower/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,291 @@
<template>
    <div class="app-container">
        <div class="search_form">
            <div>
                <span class="search_title">设备名称：</span>
                <el-input
                    v-model="searchForm.name"
                    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="info" plain icon="Upload" @click="handleImport">导入</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>
        <form-dia ref="formDia" @close="handleQuery"></form-dia>
        <el-dialog
            :title="upload.title"
            v-model="upload.open"
            width="400px"
            append-to-body
        >
            <el-upload
                ref="uploadRef"
                :limit="1"
                accept=".xlsx, .xls"
                :headers="upload.headers"
                :action="upload.url + '?updateSupport=' + upload.updateSupport"
                :disabled="upload.isUploading"
                :before-upload="upload.beforeUpload"
                :on-progress="upload.onProgress"
                :on-success="upload.onSuccess"
                :on-error="upload.onError"
                :on-change="upload.onChange"
                :auto-upload="false"
                drag
            >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <template #tip>
                    <div class="el-upload__tip text-center">
                        <span>仅允许导入xls、xlsx格式文件。</span>
                        <!--            <el-link-->
                        <!--              type="primary"-->
                        <!--              :underline="false"-->
                        <!--              style="font-size: 12px; vertical-align: baseline"-->
                        <!--              @click="importTemplate"-->
                        <!--              >下载模板</el-link-->
                        <!--            >-->
                    </div>
                </template>
            </el-upload>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitFileForm">ç¡® å®š</el-button>
                    <el-button @click="upload.open = false">取 æ¶ˆ</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import {Search} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import FormDia from "@/views/energyManagement/energyPower/components/formDia.vue";
import {ElMessageBox} from "element-plus";
import {getToken} from "@/utils/auth.js";
import {equipmentEnergyDelete, equipmentEnergyListPage} from "@/api/energyManagement/index.js";
const { proxy } = getCurrentInstance();

const data = reactive({
    searchForm: {
        name: "",
    },
});
const { searchForm } = toRefs(data);

const tableColumn = ref([
    {
        label: "设备名称",
        prop: "name",
        width: 200,
    },
    {
        label: "规格型号",
        prop: "code",
        width: 200,
    },
    {
        label: "额定功率",
        prop: "powerRating",
    },
    {
        label: "实际功率",
        prop: "powerActual",
    },
    {
        label: "运行时间",
        prop: "runDate",
        width:150
    },
    {
        label: "当日用电量",
        prop: "dayNum",
        width: 150,
    },
    {
        label: "累计用电量",
        prop: "sumNum",
        width: 150,
    },
    {
        label: "每日限制电量",
        prop: "everyNum",
        width:220
    },
    {
        dataType: "action",
        label: "操作",
        align: "center",
        fixed: 'right',
        operation: [
            {
                name: "编辑",
                type: "text",
                clickFun: (row) => {
                    openForm("edit", row);
                },
            },
        ],
    },
]);
const tableData = ref([]);
const tableLoading = ref(false);
const page = reactive({
    current: 1,
    size: 100,
    total: 0,
});
// è¡¨æ ¼é€‰æ‹©æ•°æ®
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 + "/basic/customer/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){
            proxy.$modal.msgError(response.msg);
        }else{
            proxy.$modal.msgWarning(response.msg);
        }
    },
    // æ–‡ä»¶ä¸Šä¼ å¤±è´¥æ—¶çš„回调
    onError: (error, file, fileList) => {
        console.error('上传失败', error, file, fileList);
        proxy.$modal.msgError("文件上传失败");
    },
    // æ–‡ä»¶ä¸Šä¼ è¿›åº¦å›žè°ƒ
    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;
    equipmentEnergyListPage({ ...searchForm.value, ...page }).then((res) => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.total = res.data.total;
    });
};

// æ‰“开弹框
const openForm = (type, row) => {
    nextTick(() => {
        formDia.value?.openDialog(type, row)
    })
};

/** å¯¼å…¥æŒ‰é’®æ“ä½œ */
function handleImport() {
    upload.title = "设备能耗";
    upload.open = true;
}
/** æäº¤ä¸Šä¼ æ–‡ä»¶ */
function submitFileForm() {
    proxy.$refs["uploadRef"].submit();
}

const handleDelete = () => {
    let ids = [];
    if (selectedRows.value.length > 0) {
        // æ£€æŸ¥æ˜¯å¦æœ‰ä»–人维护的数据
        const unauthorizedData = selectedRows.value.filter(item => item.maintainer !== userStore.nickName);
        if (unauthorizedData.length > 0) {
            proxy.$modal.msgWarning("不可删除他人维护的数据");
            return;
        }
        ids = selectedRows.value.map((item) => item.id);
    } else {
        proxy.$modal.msgWarning("请选择数据");
        return;
    }
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            tableLoading.value = true;
            equipmentEnergyDelete(ids)
                .then((res) => {
                    proxy.$modal.msgSuccess("删除成功");
                    getList();
                })
                .finally(() => {
                    tableLoading.value = false;
                });
        })
        .catch(() => {
            proxy.$modal.msg("已取消");
        });
};
onMounted(() => {
    getList();
});
</script>

<style scoped>

</style>

 src/views/energyManagement/energyTrends/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,116 @@
<template>
    <div class="app-container">
        <div class="search_form">
            <div>
                <span class="search_title">设备名称：</span>
                <el-input
                    v-model="searchForm.customerName"
                    style="width: 240px"
                    placeholder="请输入"
                    @change="handleQuery"
                    clearable
                    :prefix-icon="Search"
                />
                <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
                >搜索</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>
		
    </div>
</template>

<script setup>
import {Search} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {listPageByTrend} from "@/api/energyManagement/index.js";

const data = reactive({
    searchForm: {
        customerName: "",
    },
});
const { searchForm } = toRefs(data);

const tableColumn = ref([
    {
        label: "设备名称",
        prop: "name",
        width: 220,
    },
    {
        label: "规格型号",
        prop: "code",
        width: 220,
    },
    {
        label: "运行时间",
        prop: "runDate",
        width: 250,
    },
    {
        label: "昨日用电量",
        prop: "toDayNum",
    },
    {
        label: "本月平均电量",
        prop: "avgNum",
        width:150
    },
    {
        label: "趋势",
        prop: "trend",
        width: 220,
    },
]);
const tableData = ref([]);
const tableLoading = ref(false);
const page = reactive({
    current: 1,
    size: 100,
    total: 0,
});
// è¡¨æ ¼é€‰æ‹©æ•°æ®
const handleSelectionChange = (selection) => {
    selectedRows.value = selection;
};

// æŸ¥è¯¢åˆ—表
/** æœç´¢æŒ‰é’®æ“ä½œ */
const handleQuery = () => {
    page.current = 1;
    getList();
};
const pagination = (obj) => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
};
const getList = () => {
    tableLoading.value = true;
    listPageByTrend({ ...searchForm.value, ...page }).then((res) => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.total = res.data.total;
    });
};
onMounted(() => {
    getList();
});
</script>

<style scoped>

</style>