染整线能耗月统计

src/api/ws/calc.js

@@ -9,6 +9,15 @@ export function listCalc(query) {
     })
 }
 
+// 查询能源统计月报表
+export function listCalcMonth(query) {
+    return request({
+        url: '/ws/calc/calc/rz',
+        method: 'get',
+        params: query
+    })
+}
+
 // 查询能源统计详细
 export function getCalc(calcId) {
     return request({

src/permission.js

@@ -53,7 +53,7 @@ router.beforeEach((to, from, next) => {
                 }).catch(err => {
                     useUserStore().logOut().then(() => {
                         ElMessage.error(err)
-                        next({path: '/twin/'})
+                        next({path: '/'})
                     })
                 })
             } else {

src/views/ws/month/index.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="月份" style="width: 308px">
+        <el-date-picker
+            v-model="month"
+            type="month"
+            value-format="YYYY-MM"
+            placeholder="请选择月份">
+          >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button
+            type="warning"
+            plain
+            icon="Download"
+            @click="handleExport"
+        >导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="calcList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center"/>
+      <!--      <el-table-column label="统计ID" align="center" prop="calcId" />-->
+      <el-table-column label="日期" align="center" prop="dataDate" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="费用（元/天）" align="center">
+        <el-table-column label="总费用" align="center" prop="price"/>
+        <el-table-column label="电费" align="center">
+          <template #default="scope">
+            <span class="clickable-text" @click="df(scope.row)">{{ parseFloat(scope.row.d.price).toFixed(2) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="水费" align="center">
+          <template #default="scope">
+            {{ parseFloat(scope.row.s.price).toFixed(2) }}
+<!--            <span class="clickable-text" @click="sf(scope.row)">{{ parseFloat(scope.row.s.price).toFixed(2) }}</span>-->
+          </template>
+        </el-table-column>
+        <el-table-column label="汽费" align="center">
+          <template #default="scope">
+            <span class="clickable-text" @click="qf(scope.row)">{{ parseFloat(scope.row.q.price).toFixed(2) }}</span>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="总米数（米/天）" align="center" prop="aPrice"/>
+      <el-table-column label="单位能耗（米/元）" align="center" prop=""/>
+      <el-table-column label="重量（KG/天）" align="center" prop=""/>
+      <el-table-column label="单位能耗（KG/元）" align="center" prop=""/>
+    </el-table>
+
+    <el-dialog :title="d_title" v-model="d_open" width="1000px" append-to-body>
+      <el-table :data="d_form" border style="width: 100%">
+        <el-table-column label="类型" prop="type"></el-table-column>
+        <el-table-column label="前整车间" prop="qz"></el-table-column>
+        <el-table-column label="后整车间" prop="hz"></el-table-column>
+        <el-table-column label="印染车间" prop="yr"></el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <el-dialog :title="q_title" v-model="q_open" width="1000px" append-to-body>
+      <el-table :data="q_form" border style="width: 100%">
+        <el-table-column label="类型" prop="type"></el-table-column>
+        <el-table-column label="用能" prop="yn"></el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
+
+
+</template>
+
+<style>
+.clickable-text {
+  color: #409EFF; /* Element UI 的主题蓝色 */
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+/* 悬停效果 */
+.clickable-text:hover {
+  color: #66b1ff; /* 更浅的蓝色 */
+}
+</style>
+
+<script setup name="MonthCalc">
+import {addCalc, delCalc, getCalc, listCalcMonth, updateCalc} from "@/api/ws/calc";
+
+const {proxy} = getCurrentInstance();
+
+const calcList = ref([]);
+
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const month = ref("");
+const d_title = ref("");
+const d_open = ref(false);
+const d_form = ref({});
+const s_title = ref("");
+const s_open = ref(false);
+const s_form = ref({});
+const q_title = ref("");
+const q_open = ref(false);
+const q_form = ref({});
+const originalData = ref({});
+
+const data = reactive({
+
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    dataDate: null,
+    wsId: null,
+    totalPrice: null,
+    aPrice: null,
+    bPrice: null,
+    totalValue: null,
+    aValue: null,
+    bValue: null
+  },
+  rules: {}
+});
+// 初始化日期
+const initDate = () => {
+  let day = new Date();
+  day.setHours(day.getHours() - 7);
+  day.setDate(day.getDate() - 1);
+  let end = new Date(day).Format('yyyy-MM');
+  month.value = end
+}
+const {queryParams, form, rules} = toRefs(data);
+
+function df(row) {
+  d_open.value = true;
+  d_form.value = [
+    {type: "总电(kWh）", qz: row.d.qz.use, hz: row.d.hz.use, yr: row.d.yr.use},
+    {type: "峰电(kWh/"+row.elecPrice.pricePeak+"）", qz: row.d.qz.fuse, hz: row.d.hz.fuse, yr: row.d.yr.fuse},
+    {type: "谷电(kWh/"+row.elecPrice.priceValley+"）", qz: row.d.qz.guse, hz: row.d.hz.guse, yr: row.d.yr.guse},
+    {type: "平电(kWh/"+row.elecPrice.priceFlat+"）", qz: row.d.qz.puse, hz: row.d.hz.puse, yr: row.d.yr.puse},
+    {type: "尖峰(kWh/"+row.elecPrice.priceSuperPeak+")", qz: row.d.qz.jfUse, hz: row.d.hz.jfUse, yr: row.d.yr.jfUse},
+    {type: "电费（元/天）", qz: row.d.qz.price, hz: row.d.hz.price, yr: row.d.yr.price},
+  ]
+
+  d_title.value = "电费明细（" + new Date(row.date).Format('yyyy-MM-dd') + "）";
+}
+
+// function sf(row) {
+//   d_open.value = true;
+//   d_form.value = [
+//     {type: "总电(kWh）", qz: row.d.qz.use, hz: row.d.hz.use, yr: row.d.yr.use},
+//     {type: "峰电(kWh/"+row.elecPrice.pricePeak+"）", qz: row.d.qz.fuse, hz: row.d.hz.fuse, yr: row.d.yr.fuse},
+//     {type: "谷电(kWh/"+row.elecPrice.priceValley+"）", qz: row.d.qz.guse, hz: row.d.hz.guse, yr: row.d.yr.guse},
+//     {type: "平电(kWh/"+row.elecPrice.priceFlat+"）", qz: row.d.qz.puse, hz: row.d.hz.puse, yr: row.d.yr.puse},
+//     {type: "尖峰(kWh/"+row.elecPrice.priceSuperPeak+")", qz: row.d.qz.jfUse, hz: row.d.hz.jfUse, yr: row.d.yr.jfUse},
+//     {type: "电费（元/天）", qz: row.d.qz.price, hz: row.d.hz.price, yr: row.d.yr.price},
+//   ]
+//
+//   d_title.value = "电费明细（" + new Date(row.date).Format('yyyy-MM-dd') + "）";
+// }
+
+function qf(row) {
+  q_open.value = true;
+  q_form.value = [
+    {type: "低压蒸汽（GJ/"+row.q.lowUnitPrice+"）",yn:row.q.lowUse},
+    {type: "低压费用（元/天）", yn: row.q.lowPrice,},
+    {type: "中压蒸汽（GJ/"+row.d.qz.midUnitPrice+"）",yn:row.q.midUse},
+    {type: "中亚费用（元/天）", qz: row.q.midPrice},
+  ]
+
+  d_title.value = "电费明细（" + new Date(row.date).Format('yyyy-MM-dd') + "）";
+}
+
+/** 查询能源统计列表 */
+function getList() {
+  loading.value = true;
+  queryParams.value.params = {};
+  if (null != month && '' != month) {
+    queryParams.value.params["month"] = month.value;
+  }
+  listCalcMonth(queryParams.value).then(response => {
+    calcList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.calcId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const _calcId = row.calcId || ids.value
+  getCalc(_calcId).then(response => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改能源统计";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["calcRef"].validate(valid => {
+    if (valid) {
+      if (form.value.calcId != null) {
+        updateCalc(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addCalc(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _calcIds = row.calcId || ids.value;
+  proxy.$modal.confirm('是否确认删除能源统计编号为"' + _calcIds + '"的数据项？').then(function () {
+    return delCalc(_calcIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {
+  });
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('ws/calc/export/rz', {
+    ...queryParams.value
+  }, `染整线能耗统计（${month.value}）.xlsx`)
+}
+
+initDate();
+getList();
+</script>