From 108a4fb5ce13ed06596f7e125e59632e76aafa58 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期二, 10 三月 2026 18:00:37 +0800
Subject: [PATCH] 能耗管理模块
---
src/views/productionPlan/productionPlan/index.vue | 735 ++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 529 insertions(+), 206 deletions(-)
diff --git a/src/views/productionPlan/productionPlan/index.vue b/src/views/productionPlan/productionPlan/index.vue
index 15c1fa9..7c475ce 100644
--- a/src/views/productionPlan/productionPlan/index.vue
+++ b/src/views/productionPlan/productionPlan/index.vue
@@ -50,6 +50,7 @@
:column="tableColumn"
:tableData="tableData"
:page="page"
+ height="calc(100vh - 350px)"
:tableLoading="tableLoading"
:isSelection="true"
:selectable="isSelectable"
@@ -63,12 +64,12 @@
width="500px">
<el-form :model="mergeForm"
label-width="120px">
- <el-form-item label="鐢熶骇璁″垝鍙�">
- <el-input v-model="mergeForm.productionPlanNo"
+ <el-form-item label="搴忓垪鍙�">
+ <el-input v-model="mergeForm.serialNo"
disabled />
</el-form-item>
<el-form-item label="鐢熶骇璁″垝鏁伴噺">
- <el-input-number v-model="mergeForm.totalManufactureQuantity"
+ <el-input-number v-model="mergeForm.totalquantity"
:min="1"
:step="1"
style="width: 100%" />
@@ -93,17 +94,83 @@
<el-table :data="categorySummary"
border
style="width: 100%">
- <el-table-column prop="productCategory"
+ <el-table-column prop="materialCategory"
label="浜у搧绫诲埆"
align="center"
width="150" />
- <el-table-column prop="totalManufactureQuantity"
+ <el-table-column prop="totalquantity"
label="鎬诲埗閫犳暟閲�"
align="center" />
</el-table>
<template #footer>
<span class="dialog-footer">
<el-button @click="showCategorySummaryDialog = false">鍏抽棴</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ <!-- 杩借釜杩涘害寮圭獥 -->
+ <el-dialog v-model="showTrackProgressDialog"
+ :title="`杩借釜杩涘害 - ${trackProgressForm.serialNo || ''}`"
+ width="600px">
+ <el-form :model="trackProgressForm"
+ label-width="120px">
+ <el-form-item label="搴忓垪鍙�">
+ <el-input v-model="trackProgressForm.serialNo"
+ disabled />
+ </el-form-item>
+ <el-form-item label="褰撳墠鐘舵��">
+ <el-select v-model="trackProgressForm.currentStatus"
+ placeholder="璇烽�夋嫨鐘舵��">
+ <el-option label="寰呭鐞�"
+ value="pending" />
+ <el-option label="杩涜涓�"
+ value="processing" />
+ <el-option label="宸插畬鎴�"
+ value="completed" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="瀹屾垚杩涘害">
+ <el-progress :percentage="trackProgressForm.completionRate"
+ :status="trackProgressForm.completionRate === 100 ? 'success' : ''" />
+ </el-form-item>
+ <el-form-item label="杩涘害璇︽儏">
+ <el-table :data="trackProgressForm.progressDetails"
+ border
+ style="width: 100%">
+ <el-table-column prop="step"
+ label="姝ラ"
+ align="center"
+ width="100" />
+ <el-table-column prop="status"
+ label="鐘舵��"
+ align="center"
+ width="100">
+ <template #default="scope">
+ <el-tag :type="scope.row.status === 'completed' ? 'success' : scope.row.status === 'processing' ? 'warning' : 'info'">
+ {{ scope.row.status === 'completed' ? '宸插畬鎴�' : scope.row.status === 'processing' ? '杩涜涓�' : '寰呭紑濮�' }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column prop="startTime"
+ label="寮�濮嬫椂闂�"
+ align="center"
+ width="180" />
+ <el-table-column prop="endTime"
+ label="缁撴潫鏃堕棿"
+ align="center"
+ width="180" />
+ </el-table>
+ </el-form-item>
+ <el-form-item label="澶囨敞">
+ <el-input v-model="trackProgressForm.remark"
+ type="textarea" />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="showTrackProgressDialog = false">鍏抽棴</el-button>
+ <el-button type="primary"
+ @click="handleUpdateProgress">鏇存柊杩涘害</el-button>
</span>
</template>
</el-dialog>
@@ -114,7 +181,7 @@
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
- import { productOrderListPage } from "@/api/productionManagement/productionOrder.js";
+ import { productionPlanListPage } from "@/api/productionPlan/productionPlan.js";
import PIMTable from "./components/PIMTable.vue";
const tableColumn = ref([
@@ -139,8 +206,8 @@
width: "120px",
},
{
- label: "鐢熶骇璁″垝鍙�",
- prop: "productionPlanNo",
+ label: "搴忓垪鍙�",
+ prop: "serialNo",
width: "140px",
},
{
@@ -155,7 +222,7 @@
},
{
label: "浜у搧绫诲埆",
- prop: "productCategory",
+ prop: "materialCategory",
width: "100px",
},
{
@@ -171,7 +238,7 @@
},
{
label: "鍒堕�犳暟閲�",
- prop: "manufactureQuantity",
+ prop: "quantity",
width: "100px",
align: "right",
},
@@ -237,8 +304,8 @@
clickFun: row => {
// 鍗曠嫭涓嬪彂鎿嶄綔
// 璁剧疆琛ㄥ崟鏁版嵁
- mergeForm.productionPlanNo = row.productionPlanNo;
- mergeForm.totalManufactureQuantity = row.manufactureQuantity;
+ mergeForm.serialNo = row.serialNo;
+ mergeForm.totalquantity = row.quantity;
mergeForm.remark = "";
// 鎵撳紑寮圭獥
@@ -249,8 +316,7 @@
name: "杩借釜杩涘害",
type: "text",
clickFun: row => {
- // 杩借釜杩涘害鎿嶄綔
- ElMessage.warning("杩借釜杩涘害鍔熻兘寰呭紑鍙�");
+ handleTrackProgress(row);
},
},
],
@@ -274,17 +340,118 @@
const isShowNewModal = ref(false);
// 鍚堝苟涓嬪彂琛ㄥ崟鏁版嵁
const mergeForm = reactive({
- productionPlanNo: "",
- totalManufactureQuantity: 0,
+ serialNo: "",
+ totalquantity: 0,
remark: "",
});
+
+ // 杩借釜杩涘害寮圭獥鎺у埗
+ const showTrackProgressDialog = ref(false);
+ // 杩借釜杩涘害琛ㄥ崟鏁版嵁
+ const trackProgressForm = reactive({
+ serialNo: "",
+ currentStatus: "",
+ completionRate: 0,
+ progressDetails: [],
+ remark: "",
+ });
+
+ // 澶勭悊杩借釜杩涘害鎸夐挳鐐瑰嚮
+ const handleTrackProgress = row => {
+ // 璁剧疆琛ㄥ崟鏁版嵁
+ trackProgressForm.serialNo = row.serialNo;
+ trackProgressForm.currentStatus = row.status;
+
+ // 鐢熸垚妯℃嫙杩涘害鏁版嵁
+ trackProgressForm.progressDetails = generateProgressDetails(row.status);
+
+ // 璁＄畻瀹屾垚鐜�
+ trackProgressForm.completionRate = calculateCompletionRate(
+ trackProgressForm.progressDetails
+ );
+ trackProgressForm.remark = "";
+
+ // 鎵撳紑寮圭獥
+ showTrackProgressDialog.value = true;
+ };
+
+ // 鐢熸垚妯℃嫙杩涘害璇︽儏鏁版嵁
+ const generateProgressDetails = status => {
+ const details = [
+ {
+ step: "璁″垝纭",
+ status: "completed",
+ startTime: "2026-03-01 09:00:00",
+ endTime: "2026-03-01 10:00:00",
+ },
+ {
+ step: "鐗╂枡鍑嗗",
+ status:
+ status === "completed"
+ ? "completed"
+ : status === "processing"
+ ? "completed"
+ : "pending",
+ startTime:
+ status === "completed" || status === "processing"
+ ? "2026-03-01 10:30:00"
+ : "",
+ endTime:
+ status === "completed" || status === "processing"
+ ? "2026-03-02 16:00:00"
+ : "",
+ },
+ {
+ step: "鐢熶骇鍔犲伐",
+ status:
+ status === "completed"
+ ? "completed"
+ : status === "processing"
+ ? "processing"
+ : "pending",
+ startTime:
+ status === "completed" || status === "processing"
+ ? "2026-03-03 08:00:00"
+ : "",
+ endTime: status === "completed" ? "2026-03-08 17:00:00" : "",
+ },
+ {
+ step: "璐ㄩ噺妫�楠�",
+ status: status === "completed" ? "completed" : "pending",
+ startTime: status === "completed" ? "2026-03-09 09:00:00" : "",
+ endTime: status === "completed" ? "2026-03-09 15:00:00" : "",
+ },
+ {
+ step: "鍏ュ簱",
+ status: status === "completed" ? "completed" : "pending",
+ startTime: status === "completed" ? "2026-03-10 10:00:00" : "",
+ endTime: status === "completed" ? "2026-03-10 11:00:00" : "",
+ },
+ ];
+ return details;
+ };
+
+ // 璁＄畻瀹屾垚鐜�
+ const calculateCompletionRate = details => {
+ const completedSteps = details.filter(
+ step => step.status === "completed"
+ ).length;
+ return Math.round((completedSteps / details.length) * 100);
+ };
+
+ // 澶勭悊杩涘害鏇存柊
+ const handleUpdateProgress = () => {
+ // 杩欓噷鍙互娣诲姞鏇存柊杩涘害鐨勯�昏緫
+ ElMessage.success("杩涘害鏇存柊鎴愬姛");
+ showTrackProgressDialog.value = false;
+ };
const data = reactive({
searchForm: {
customerName: "",
salesContractNo: "",
projectName: "",
- productCategory: "",
+ materialCategory: "",
specificationModel: "",
},
});
@@ -307,14 +474,14 @@
// 閬嶅巻琛ㄦ牸鏁版嵁锛屾寜浜у搧绫诲埆姹囨��
tableData.value.forEach(row => {
- const category = row.productCategory;
+ const category = row.materialCategory;
if (!summary[category]) {
summary[category] = {
- productCategory: category,
- totalManufactureQuantity: 0,
+ materialCategory: category,
+ totalquantity: 0,
};
}
- summary[category].totalManufactureQuantity += row.manufactureQuantity;
+ summary[category].totalquantity += row.quantity;
});
// 杞崲涓烘暟缁勬牸寮�
@@ -326,164 +493,164 @@
// 鏋勯�犱竴涓柊鐨勫璞★紝涓嶅寘鍚玡ntryDate瀛楁
const params = { ...searchForm.value, ...page };
params.entryDate = undefined;
- tableData.value = [
- {
- id: 1,
- source: "閿�鍞鍗�",
- status: "寰呭鐞�",
- auditStatus: "宸插鏍�",
- orderNo: "SO20260301001",
- productionPlanNo: "PP20260301001",
- partNo: "P001",
- partName: "闆朵欢A",
- productCategory: "绫诲埆1",
- processFileNo: "PF20260301001",
- salesQuantity: 100,
- manufactureQuantity: 105,
- partUnit: "涓�",
- mainPlanDemandDate: "2026-03-15",
- commitmentDate: "2026-03-10",
- manufactureProperty: "甯歌",
- remark: "",
- updateTime: "2026-03-01",
- updateBy: "admin",
- createTime: "2026-03-01",
- createBy: "admin",
- },
- {
- id: 2,
- source: "閿�鍞鍗�",
- status: "寰呭鐞�",
- auditStatus: "宸插鏍�",
- orderNo: "SO20260301002",
- productionPlanNo: "PP20260301001",
- partNo: "P002",
- partName: "闆朵欢B",
- productCategory: "绫诲埆1",
- processFileNo: "PF20260301002",
- salesQuantity: 200,
- manufactureQuantity: 210,
- partUnit: "涓�",
- mainPlanDemandDate: "2026-03-15",
- commitmentDate: "2026-03-10",
- manufactureProperty: "甯歌",
- remark: "",
- updateTime: "2026-03-01",
- updateBy: "admin",
- createTime: "2026-03-01",
- createBy: "admin",
- },
- {
- id: 3,
- source: "閿�鍞鍗�",
- status: "杩涜涓�",
- auditStatus: "宸插鏍�",
- orderNo: "SO20260301003",
- productionPlanNo: "PP20260301002",
- partNo: "P003",
- partName: "闆朵欢C",
- productCategory: "绫诲埆2",
- processFileNo: "PF20260301003",
- salesQuantity: 150,
- manufactureQuantity: 155,
- partUnit: "涓�",
- mainPlanDemandDate: "2026-03-20",
- commitmentDate: "2026-03-15",
- manufactureProperty: "甯歌",
- remark: "",
- updateTime: "2026-03-01",
- updateBy: "admin",
- createTime: "2026-03-01",
- createBy: "admin",
- },
- {
- id: 4,
- source: "閿�鍞鍗�",
- status: "杩涜涓�",
- auditStatus: "宸插鏍�",
- orderNo: "SO20260301004",
- productionPlanNo: "PP20260301002",
- partNo: "P004",
- partName: "闆朵欢D",
- productCategory: "绫诲埆2",
- processFileNo: "PF20260301004",
- salesQuantity: 300,
- manufactureQuantity: 315,
- partUnit: "涓�",
- mainPlanDemandDate: "2026-03-20",
- commitmentDate: "2026-03-15",
- manufactureProperty: "甯歌",
- remark: "",
- updateTime: "2026-03-01",
- updateBy: "admin",
- createTime: "2026-03-01",
- createBy: "admin",
- },
- {
- id: 5,
- source: "閿�鍞鍗�",
- status: "宸插畬鎴�",
- auditStatus: "宸插鏍�",
- orderNo: "SO20260301005",
- productionPlanNo: "PP20260301003",
- partNo: "P005",
- partName: "闆朵欢E",
- productCategory: "绫诲埆3",
- processFileNo: "PF20260301005",
- salesQuantity: 250,
- manufactureQuantity: 260,
- partUnit: "涓�",
- mainPlanDemandDate: "2026-03-10",
- commitmentDate: "2026-03-05",
- manufactureProperty: "甯歌",
- remark: "",
- updateTime: "2026-03-01",
- updateBy: "admin",
- createTime: "2026-03-01",
- createBy: "admin",
- },
- ];
- tableLoading.value = false;
- page.total = tableData.value.length;
- // 璁＄畻浜у搧绫诲埆姹囨�荤粺璁�
- calculateCategorySummary();
- // productOrderListPage(params)
- // .then(res => {
- // tableLoading.value = false;
+ // tableData.value = [
+ // {
+ // id: 1,
+ // source: "閿�鍞鍗�",
+ // status: "寰呭鐞�",
+ // auditStatus: "宸插鏍�",
+ // orderNo: "SO20260301001",
+ // serialNo: "PP20260301001",
+ // partNo: "P001",
+ // partName: "闆朵欢A",
+ // materialCategory: "绫诲埆1",
+ // processFileNo: "PF20260301001",
+ // salesQuantity: 100,
+ // quantity: 105,
+ // partUnit: "涓�",
+ // mainPlanDemandDate: "2026-03-15",
+ // commitmentDate: "2026-03-10",
+ // manufactureProperty: "甯歌",
+ // remark: "",
+ // updateTime: "2026-03-01",
+ // updateBy: "admin",
+ // createTime: "2026-03-01",
+ // createBy: "admin",
+ // },
+ // {
+ // id: 2,
+ // source: "閿�鍞鍗�",
+ // status: "寰呭鐞�",
+ // auditStatus: "宸插鏍�",
+ // orderNo: "SO20260301002",
+ // serialNo: "PP20260301001",
+ // partNo: "P002",
+ // partName: "闆朵欢B",
+ // materialCategory: "绫诲埆1",
+ // processFileNo: "PF20260301002",
+ // salesQuantity: 200,
+ // quantity: 210,
+ // partUnit: "涓�",
+ // mainPlanDemandDate: "2026-03-15",
+ // commitmentDate: "2026-03-10",
+ // manufactureProperty: "甯歌",
+ // remark: "",
+ // updateTime: "2026-03-01",
+ // updateBy: "admin",
+ // createTime: "2026-03-01",
+ // createBy: "admin",
+ // },
+ // {
+ // id: 3,
+ // source: "閿�鍞鍗�",
+ // status: "杩涜涓�",
+ // auditStatus: "宸插鏍�",
+ // orderNo: "SO20260301003",
+ // serialNo: "PP20260301002",
+ // partNo: "P003",
+ // partName: "闆朵欢C",
+ // materialCategory: "绫诲埆2",
+ // processFileNo: "PF20260301003",
+ // salesQuantity: 150,
+ // quantity: 155,
+ // partUnit: "涓�",
+ // mainPlanDemandDate: "2026-03-20",
+ // commitmentDate: "2026-03-15",
+ // manufactureProperty: "甯歌",
+ // remark: "",
+ // updateTime: "2026-03-01",
+ // updateBy: "admin",
+ // createTime: "2026-03-01",
+ // createBy: "admin",
+ // },
+ // {
+ // id: 4,
+ // source: "閿�鍞鍗�",
+ // status: "杩涜涓�",
+ // auditStatus: "宸插鏍�",
+ // orderNo: "SO20260301004",
+ // serialNo: "PP20260301002",
+ // partNo: "P004",
+ // partName: "闆朵欢D",
+ // materialCategory: "绫诲埆2",
+ // processFileNo: "PF20260301004",
+ // salesQuantity: 300,
+ // quantity: 315,
+ // partUnit: "涓�",
+ // mainPlanDemandDate: "2026-03-20",
+ // commitmentDate: "2026-03-15",
+ // manufactureProperty: "甯歌",
+ // remark: "",
+ // updateTime: "2026-03-01",
+ // updateBy: "admin",
+ // createTime: "2026-03-01",
+ // createBy: "admin",
+ // },
+ // {
+ // id: 5,
+ // source: "閿�鍞鍗�",
+ // status: "宸插畬鎴�",
+ // auditStatus: "宸插鏍�",
+ // orderNo: "SO20260301005",
+ // serialNo: "PP20260301003",
+ // partNo: "P005",
+ // partName: "闆朵欢E",
+ // materialCategory: "绫诲埆3",
+ // processFileNo: "PF20260301005",
+ // salesQuantity: 250,
+ // quantity: 260,
+ // partUnit: "涓�",
+ // mainPlanDemandDate: "2026-03-10",
+ // commitmentDate: "2026-03-05",
+ // manufactureProperty: "甯歌",
+ // remark: "",
+ // updateTime: "2026-03-01",
+ // updateBy: "admin",
+ // createTime: "2026-03-01",
+ // createBy: "admin",
+ // },
+ // ];
+ // tableLoading.value = false;
+ // page.total = tableData.value.length;
+ // // 璁＄畻浜у搧绫诲埆姹囨�荤粺璁�
+ // calculateCategorySummary();
+ productionPlanListPage(params)
+ .then(res => {
+ tableLoading.value = false;
- // tableData.value = res.data.records;
- // page.total = res.data.total;
- // // 璁＄畻浜у搧绫诲埆姹囨�荤粺璁�
- // calculateCategorySummary();
- // })
- // .catch(() => {
- // tableLoading.value = false;
- // });
+ tableData.value = res.data.records;
+ page.total = res.data.total;
+ // 璁＄畻浜у搧绫诲埆姹囨�荤粺璁�
+ calculateCategorySummary();
+ })
+ .catch(() => {
+ tableLoading.value = false;
+ });
};
- // 閫変腑鐨勭敓浜ц鍒掑彿
- const selectedProductionPlanNo = ref("");
+ // 閫変腑鐨勫簭鍒楀彿
+ const selectedserialNo = ref("");
// 琛ㄦ牸閫夋嫨鏁版嵁
const handleSelectionChange = selection => {
selectedRows.value = selection;
- // 濡傛灉鏈夐�変腑鐨勮锛岃褰曠涓�涓�変腑琛岀殑鐢熶骇璁″垝鍙�
+ // 濡傛灉鏈夐�変腑鐨勮锛岃褰曠涓�涓�変腑琛岀殑搴忓垪鍙�
if (selection.length > 0) {
- selectedProductionPlanNo.value = selection[0].productionPlanNo;
+ selectedserialNo.value = selection[0].serialNo;
} else {
- // 濡傛灉娌℃湁閫変腑鐨勮锛屾竻绌虹敓浜ц鍒掑彿
- selectedProductionPlanNo.value = "";
+ // 濡傛灉娌℃湁閫変腑鐨勮锛屾竻绌哄簭鍒楀彿
+ selectedserialNo.value = "";
}
};
// 鍒ゆ柇琛屾槸鍚﹀彲閫夋嫨
const isSelectable = row => {
// 濡傛灉娌℃湁閫変腑鐨勮锛屾墍鏈夎閮藉彲閫夋嫨
- if (!selectedProductionPlanNo.value) {
+ if (!selectedserialNo.value) {
return true;
}
- // 濡傛灉鏈夐�変腑鐨勮锛屽彧鏈夌敓浜ц鍒掑彿鐩稿悓鐨勮鎵嶅彲閫夋嫨
- return row.productionPlanNo === selectedProductionPlanNo.value;
+ // 濡傛灉鏈夐�変腑鐨勮锛屽彧鏈夊簭鍒楀彿鐩稿悓鐨勮鎵嶅彲閫夋嫨
+ return row.serialNo === selectedserialNo.value;
};
// 澶勭悊鍚堝苟涓嬪彂鎸夐挳鐐瑰嚮
@@ -495,12 +662,12 @@
// 璁＄畻鎬诲埗閫犳暟閲�
const totalQuantity = selectedRows.value.reduce((sum, row) => {
- return sum + row.manufactureQuantity;
+ return sum + row.quantity;
}, 0);
// 璁剧疆琛ㄥ崟鏁版嵁
- mergeForm.productionPlanNo = selectedProductionPlanNo.value;
- mergeForm.totalManufactureQuantity = totalQuantity;
+ mergeForm.serialNo = selectedserialNo.value;
+ mergeForm.totalquantity = totalQuantity;
mergeForm.remark = "";
// 鎵撳紑寮圭獥
@@ -521,56 +688,212 @@
</script>
<style scoped lang="scss">
+ .app-container {
+ padding: 24px;
+ background-color: #f0f2f5;
+ min-height: calc(100vh - 48px);
+ }
+
.search_form {
- align-items: start;
- }
-
- .summary-section {
- margin-bottom: 16px;
- }
-
- .horizontal-summary {
display: flex;
- flex-wrap: wrap;
- gap: 20px;
- padding: 10px 0;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24px;
+ padding: 20px;
+ background-color: #ffffff;
+ border-radius: 6px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+ transition: all 0.3s ease;
+
+ &:hover {
+ box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
+ }
}
- .summary-item {
- flex: 1;
- min-width: 120px;
- text-align: center;
- padding: 10px;
- background-color: #f5f7fa;
+ .table_list {
+ // margin-bottom: 24px;
+ background-color: #ffffff;
+ border-radius: 6px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+ overflow: hidden;
+ height: calc(100vh - 250px);
+ }
+
+ :deep(.el-table) {
+ border: none;
+ border-radius: 6px;
+ overflow: hidden;
+
+ .el-table__header-wrapper {
+ background-color: #fafafa;
+
+ th {
+ background-color: #fafafa;
+ font-weight: 600;
+ color: #303133;
+ border-bottom: 1px solid #ebeef5;
+ padding: 14px 0;
+ }
+ }
+
+ .el-table__body-wrapper {
+ tr {
+ transition: all 0.3s ease;
+
+ &:hover {
+ background-color: #f5f7fa;
+ }
+
+ td {
+ border-bottom: 1px solid #ebeef5;
+ padding: 12px 0;
+ }
+ }
+
+ tr.current-row {
+ background-color: #ecf5ff;
+ }
+ }
+
+ .el-table__empty-block {
+ padding: 40px 0;
+ }
+ }
+
+ .pagination-container {
+ display: flex;
+ justify-content: flex-end;
+ padding: 16px 20px;
+ background-color: #ffffff;
+ border-top: 1px solid #ebeef5;
+ border-radius: 0 0 12px 12px;
+ }
+
+ :deep(.el-button) {
+ transition: all 0.3s ease;
+
+ &:hover {
+ transform: translateY(-1px);
+ }
+ }
+
+ :deep(.el-dialog) {
+ border-radius: 6px;
+ overflow: hidden;
+
+ .el-dialog__header {
+ background-color: #fafafa;
+ border-bottom: 1px solid #ebeef5;
+ padding: 20px 24px;
+
+ .el-dialog__title {
+ font-size: 16px;
+ font-weight: 600;
+ color: #303133;
+ }
+ }
+
+ .el-dialog__body {
+ padding: 24px;
+ }
+
+ .el-dialog__footer {
+ padding: 16px 24px;
+ border-top: 1px solid #ebeef5;
+ background-color: #fafafa;
+ }
+ }
+
+ :deep(.el-form) {
+ .el-form-item {
+ margin-bottom: 20px;
+
+ .el-form-item__label {
+ font-weight: 500;
+ color: #303133;
+ }
+
+ .el-input,
+ .el-select,
+ .el-date-picker,
+ .el-input-number {
+ width: 100%;
+
+ // .el-input__inner {
+ // border-radius: 6px;
+ // border: 1px solid #dcdfe6;
+ // transition: all 0.3s ease;
+
+ // &:focus {
+ // border-color: #409eff;
+ // box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+ // }
+ // }
+ }
+ }
+ }
+
+ :deep(.el-tag) {
border-radius: 4px;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ padding: 2px 8px;
+ font-size: 12px;
}
- .summary-label {
- font-size: 14px;
- color: #606266;
- margin-bottom: 5px;
+ @media (max-width: 768px) {
+ .app-container {
+ padding: 16px;
+ }
+
+ .search_form {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+
+ .el-form {
+ width: 100%;
+
+ .el-form-item {
+ width: 100%;
+ }
+ }
+
+ > div {
+ width: 100%;
+ display: flex;
+ gap: 12px;
+
+ .el-button {
+ flex: 1;
+ }
+ }
+ }
+
+ :deep(.el-table) {
+ th,
+ td {
+ padding: 10px 0;
+ font-size: 12px;
+ }
+ }
+
+ :deep(.el-dialog) {
+ width: 90% !important;
+ margin: 20px auto !important;
+ }
+ }
+ .consumption-value {
+ font-weight: bold;
+ color: #409eff;
}
- .summary-value {
- font-size: 18px;
- font-weight: 600;
- color: #303133;
+ .consumption-unit {
+ font-size: 12px;
+ color: #909399;
+ margin-left: 4px;
}
-
- ::v-deep .yellow {
- background-color: #faf0de;
- }
-
- ::v-deep .pink {
- background-color: #fae1de;
- }
-
- ::v-deep .red {
- background-color: #f80202;
- }
-
- ::v-deep .purple {
- background-color: #f4defa;
+ .search_form {
+ :deep(.el-form-item) {
+ margin-bottom: 0px !important;
+ }
}
</style>
--
Gitblit v1.9.3