优化

package.json

@@ -18,6 +18,7 @@
     "@element-plus/icons-vue": "2.3.1",
     "axios": "1.8.4",
     "dayjs": "1.11.13",
+    "echarts": "5.6.0",
     "element-plus": "2.9.7",
     "js-cookie": "3.0.5",
     "js-md5": "0.8.3",

src/main.ts

@@ -14,6 +14,7 @@ import "@@/assets/styles/index.scss";
 import "@@/assets/iconfont/iconfont.css";
 import "virtual:uno.css";
 import md5 from 'js-md5';
+import * as echarts from 'echarts'
 // import BaiduMap from 'vue-baidu-map-3x'
 
 // 创建应用实例
@@ -22,7 +23,7 @@ const app = createApp(App);
 app.provide('md5', md5);
 // 安装插件（全局组件、自定义指令等）
 installPlugins(app);
-
+app.config.globalProperties.$echarts = echarts
 // 安装 pinia 和 router
 app.use(pinia).use(router);
 // //百度地图

src/pages/demo/diceke/DicekeMiningloss.vue

@@ -4,10 +4,10 @@ import {
   deletedicekeMiningrecord,
   findAllMiningrecord,
   finddicekeMiningrecordById,
-  updatedicekeMiningrecord
+  updatedicekeMiningrecord,
-} from "@@/apis/tables/diceke/DicekeMiningrecord.js"
+} from "@@/apis/tables/diceke/DicekeMiningrecord.js";
-import { findAllPlateArea } from "@@/apis/tables/diceke/plateArea.js"
+import { findAllPlateArea } from "@@/apis/tables/diceke/plateArea.js";
-import { findAllshovel } from "@@/apis/tables/diceke/shovel.js"
+import { findAllshovel } from "@@/apis/tables/diceke/shovel.js";
 
 export default {
   data() {
@@ -16,52 +16,48 @@ export default {
       updatedicekeMiningrecordform: false,
       dicekeMiningrecordform: null,
       plateAreaQuerry: null,
-      shovelQuerry: null
+      shovelQuerry: null,
-    }
+    };
   },
   created() {
     // 页面渲染之前执行，一般调用methods定义的方法
-    this.getList()
+    this.getList();
   },
   methods: {
     getList() {
       findAllMiningrecord().then((Response) => {
-        console.log(Response)
+        console.log(Response);
-        this.dicekeMiningrecordQuery = Response.data.dicekeMiningrecordVoList
+        this.dicekeMiningrecordQuery = Response.data.dicekeMiningrecordVoList;
-        console.log(this.dicekeMiningrecordQuery)
+        console.log(this.dicekeMiningrecordQuery);
-      })
+      });
     },
     // 删除平盘
     removeDataById(id) {
-      ElMessageBox.confirm(
+      ElMessageBox.confirm("此操作将永久删除平盘记录，是否继续？", "提示", {
-        "此操作将永久删除平盘记录，是否继续？",
-        "提示",
-        {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-          type: "warning"
+        type: "warning",
-        }
+      })
-      )
         .then(() => {
           deletedicekeMiningrecord(id).then(() => {
             // 删除成功
             ElMessage({
               type: "success",
-              message: "删除成功!"
+              message: "删除成功!",
-            })
+            });
             // 重新加载列表
-            this.getList()
+            this.getList();
-          })
+          });
         })
         .catch(() => {
           ElMessage({
             type: "info",
-            message: "已取消删除"
+            message: "已取消删除",
-          })
+          });
-        })
+        });
     },
     handleAdd() {
-      this.isEdit = false
+      this.isEdit = false;
       this.dicekeMiningrecordform = {
         shovelID: null,
         plateID: null,
@@ -72,82 +68,106 @@ export default {
         avgGrade: "",
         dressingGrade: "",
         avgOxidationRate: "",
-        beizhu: ""
+        beizhu: "",
-      } // 清空表单内容
+      }; // 清空表单内容
       // 加载平盘和电产信息
       Promise.all([findAllPlateArea(), findAllshovel()])
         .then(([plateAreaResponse, shovelResponse]) => {
-          this.plateAreaQuerry = plateAreaResponse.data.plateArea
+          this.plateAreaQuerry = plateAreaResponse.data.plateArea;
-          this.shovelQuerry = shovelResponse.data.shovel
+          this.shovelQuerry = shovelResponse.data.shovel;
-          this.updatedicekeMiningrecordform = true // 数据加载完成后再打开弹窗
+          this.updatedicekeMiningrecordform = true; // 数据加载完成后再打开弹窗
         })
         .catch(() => {
-          ElMessage.error("加载平盘和电产信息失败，请稍后重试")
+          ElMessage.error("加载平盘和电产信息失败，请稍后重试");
-        })
+        });
-      this.updatedicekeMiningrecordform = true
+      this.updatedicekeMiningrecordform = true;
     },
     handleEdit(id) {
-      this.isEdit = true
+      this.isEdit = true;
       finddicekeMiningrecordById(id).then((Response) => {
-        this.dicekeMiningrecordform = Response.data.dicekeMiningrecordServiceById
+        this.dicekeMiningrecordform =
-        this.updatedicekeMiningrecordform = true
+          Response.data.dicekeMiningrecordServiceById;
-      })
+        this.updatedicekeMiningrecordform = true;
+      });
       findAllPlateArea().then((Response) => {
-        this.plateAreaQuerry = Response.data.plateArea
+        this.plateAreaQuerry = Response.data.plateArea;
-      })
+      });
       findAllshovel().then((Response) => {
-        this.shovelQuerry = Response.data.shovel
+        this.shovelQuerry = Response.data.shovel;
-      })
+      });
     },
     updatePlateArea() {
       if (this.isEdit) {
-        updatedicekeMiningrecord(this.dicekeMiningrecordform).then(() => {
+        updatedicekeMiningrecord(this.dicekeMiningrecordform)
+          .then(() => {
             ElMessage({
               type: "success",
-            message: "修改成功!"
+              message: "修改成功!",
-          })
+            });
-          this.updatedicekeMiningrecordform = false
+            this.updatedicekeMiningrecordform = false;
-          this.getList()
+            this.getList();
-        }).catch(() => {
-          ElMessage.error("修改失败，请稍后重试")
           })
+          .catch(() => {
+            ElMessage.error("修改失败，请稍后重试");
+          });
       } else {
-        adddicekeMiningrecord(this.dicekeMiningrecordform).then(() => {
+        adddicekeMiningrecord(this.dicekeMiningrecordform)
+          .then(() => {
             ElMessage({
               type: "success",
-            message: "新增成功!"
+              message: "新增成功!",
-          })
+            });
-          this.updatedicekeMiningrecordform = false
+            this.updatedicekeMiningrecordform = false;
-          this.getList() // 刷新列表
+            this.getList(); // 刷新列表
-        }).catch(() => {
-          ElMessage.error("新增失败，请稍后重试")
           })
+          .catch(() => {
+            ElMessage.error("新增失败，请稍后重试");
+          });
       }
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <template>
   <div class="app-container">
-    <div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
+    <div
+      style="
+        margin-bottom: 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      "
+    >
       <!-- 查询条件输入框 -->
-      <el-input v-model="searchQuery" placeholder="请输入铲号或平盘" style="width: 200px; margin-right: 10px;" />
+      <el-input
-      <el-button type="primary" @click="searchData">
+        v-model="searchQuery"
-        查询
+        placeholder="请输入铲号或平盘"
-      </el-button>
+        style="width: 200px; margin-right: 10px"
+      />
+      <el-button type="primary" @click="searchData"> 查询 </el-button>
 
       <!-- 新增按钮 -->
       <el-button
         type="primary"
         @click="handleAdd"
         icon="el-icon-plus"
-        style="width: 100px; display: flex; justify-content: center; align-items: center;"
+        style="
+          width: 100px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        "
       >
         新增
       </el-button>
     </div>
-    <el-table :data="dicekeMiningrecordQuery" border style="width: 100%" :span-method="spanMethod">
+    <el-table
+      :data="dicekeMiningrecordQuery"
+      border
+      style="width: 100%"
+      :span-method="spanMethod"
+    >
       <!-- 表格列定义 -->
       <el-table-column prop="plateRange" label="平盘（#）" />
       <el-table-column prop="shovelCode" label="铲号（#）" />
@@ -161,13 +181,24 @@ export default {
       <el-table-column prop="month" label="月份" />
       <el-table-column fixed="right" label="操作" width="150" align="center">
         <template #default="scope">
-          <div style="display: flex; justify-content: center; gap: 8px;">
+          <div style="display: flex; justify-content: center; gap: 8px">
-            <el-button type="primary" text bg size="small" plain @click="handleEdit(scope.row.recordID)">
+            <el-button
+              icon="Edit"
+              type="primary"
+              text
+              bg
+              size="small"
+              plain
+              @click="handleEdit(scope.row.recordID)"
+            >
               修改
             </el-button>
             <el-button
               type="danger"
-              text bg size="small"
+              text
+              bg
+              size="small"
+              icon="Delete"
               @click="removeDataById(scope.row.recordID)"
             >
               删除
@@ -176,42 +207,86 @@ export default {
         </template>
       </el-table-column>
     </el-table>
-    <el-dialog v-model="updatedicekeMiningrecordform" title="修改Mo品味信息" width="500">
+    <el-dialog
+      v-model="updatedicekeMiningrecordform"
+      title="修改Mo品味信息"
+      width="500"
+    >
       <el-form :model="dicekeMiningrecordform">
         <el-form-item label="电产" :label-width="formLabelWidth">
-          <el-select v-model="dicekeMiningrecordform.shovelID" placeholder="请选择电产">
+          <el-select
-            <el-option v-for="shovel in shovelQuerry" :key="shovel.shovelID" :label="shovel.shovelCode" :value="shovel.shovelID" />
+            v-model="dicekeMiningrecordform.shovelID"
+            placeholder="请选择电产"
+          >
+            <el-option
+              v-for="shovel in shovelQuerry"
+              :key="shovel.shovelID"
+              :label="shovel.shovelCode"
+              :value="shovel.shovelID"
+            />
           </el-select>
         </el-form-item>
 
         <el-form-item label="平盘" :label-width="formLabelWidth">
-          <el-select v-model="dicekeMiningrecordform.plateID" placeholder="请选择平盘">
+          <el-select
-            <el-option v-for="plateArea in plateAreaQuerry" :key="plateArea.plateID" :label="plateArea.plateRange" :value="plateArea.plateID" />
+            v-model="dicekeMiningrecordform.plateID"
+            placeholder="请选择平盘"
+          >
+            <el-option
+              v-for="plateArea in plateAreaQuerry"
+              :key="plateArea.plateID"
+              :label="plateArea.plateRange"
+              :value="plateArea.plateID"
+            />
           </el-select>
         </el-form-item>
         <el-form-item label="采矿量（t）" :label-width="formLabelWidth">
-          <el-input v-model="dicekeMiningrecordform.totalMiningTon" autocomplete="off" />
+          <el-input
+            v-model="dicekeMiningrecordform.totalMiningTon"
+            autocomplete="off"
+          />
         </el-form-item>
         <el-form-item label="金属量（#）" :label-width="formLabelWidth">
-          <el-input v-model="dicekeMiningrecordform.metalTon" autocomplete="off" />
+          <el-input
+            v-model="dicekeMiningrecordform.metalTon"
+            autocomplete="off"
+          />
         </el-form-item>
         <el-form-item label="块段采矿品位（%）" :label-width="formLabelWidth">
-          <el-input v-model="dicekeMiningrecordform.miningGrade" autocomplete="off" />
+          <el-input
+            v-model="dicekeMiningrecordform.miningGrade"
+            autocomplete="off"
+          />
         </el-form-item>
         <el-form-item label="块段氧化率（%）" :label-width="formLabelWidth">
-          <el-input v-model="dicekeMiningrecordform.oxidationRate" autocomplete="off" />
+          <el-input
+            v-model="dicekeMiningrecordform.oxidationRate"
+            autocomplete="off"
+          />
         </el-form-item>
         <el-form-item label="全月平均品位（%）" :label-width="formLabelWidth">
-          <el-input v-model="dicekeMiningrecordform.avgGrade" autocomplete="off" />
+          <el-input
+            v-model="dicekeMiningrecordform.avgGrade"
+            autocomplete="off"
+          />
         </el-form-item>
         <el-form-item label="选矿平均品位（%）" :label-width="formLabelWidth">
-          <el-input v-model="dicekeMiningrecordform.dressingGrade" autocomplete="off" />
+          <el-input
+            v-model="dicekeMiningrecordform.dressingGrade"
+            autocomplete="off"
+          />
         </el-form-item>
         <el-form-item label="全月平均氧化率（%）" :label-width="formLabelWidth">
-          <el-input v-model="dicekeMiningrecordform.avgOxidationRate" autocomplete="off" />
+          <el-input
+            v-model="dicekeMiningrecordform.avgOxidationRate"
+            autocomplete="off"
+          />
         </el-form-item>
         <el-form-item label="备注" :label-width="formLabelWidth">
-          <el-input v-model="dicekeMiningrecordform.beizhu" autocomplete="off" />
+          <el-input
+            v-model="dicekeMiningrecordform.beizhu"
+            autocomplete="off"
+          />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -219,9 +294,7 @@ export default {
           <el-button @click="updatedicekeMiningrecordform = false">
             取消
           </el-button>
-          <el-button type="primary" @click="updatePlateArea">
+          <el-button type="primary" @click="updatePlateArea"> 提交 </el-button>
-            提交
-          </el-button>
         </div>
       </template>
     </el-dialog>

src/pages/demo/diceke/DicekeMiningrecord.vue

@@ -144,11 +144,7 @@ export default {
       <el-button
         type="primary"
         @click="handleAdd"
-        style="
+        style="display: flex; justify-content: center; align-items: center"
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        "
         >新增
       </el-button>
     </div>
@@ -194,12 +190,13 @@ export default {
         label="全月平均氧化率（%）"
       />
       <el-table-column align="center" prop="beizhu" label="备注" />
-      <el-table-column align="center" fixed="right" label="操作" width="150">
+      <el-table-column align="center" fixed="right" label="操作" width="200">
         <template #default="scope">
           <div style="display: flex; justify-content: center; gap: 8px">
             <el-button
               type="primary"
               size="small"
+              icon="Edit"
               @click="handleEdit(scope.row.recordID)"
             >
               修改
@@ -207,6 +204,7 @@ export default {
             <el-button
               type="danger"
               size="small"
+              icon="Delete"
               @click="removeDataById(scope.row.recordID)"
             >
               删除
@@ -219,6 +217,7 @@ export default {
       v-model="updatedicekeMiningrecordform"
       title="修改Mo品味信息"
       width="500"
+      align-center
     >
       <el-form :model="dicekeMiningrecordform">
         <el-form-item label="电产" :label-width="formLabelWidth">

src/pages/demo/diceke/ExcavationQuantityReport.vue

@@ -153,6 +153,7 @@ export default {
             <el-button
               type="primary"
               size="small"
+              icon="Edit"
               @click="handleEdit(scope.row.precipID)"
             >
               修改
@@ -160,6 +161,7 @@ export default {
             <el-button
               type="danger"
               size="small"
+              icon="Delete"
               @click="removeDataById(scope.row.precipID)"
             >
               删除

src/pages/demo/diceke/LossDepletionReport.vue

@@ -108,6 +108,7 @@ export default {
             <el-button
               type="primary"
               size="small"
+              icon="Edit"
               @click="handleEdit(scope.row.lossID)"
             >
               修改
@@ -115,6 +116,7 @@ export default {
             <el-button
               type="danger"
               size="small"
+              icon="Delete"
               @click="removeDataById(scope.row.lossID)"
             >
               删除

src/pages/demo/diceke/PlateArea.vue

@@ -120,6 +120,7 @@ export default {
             <el-button
               type="primary"
               size="small"
+              icon="Edit"
               @click="handleEdit(scope.row.plateID)"
             >
               修改
@@ -127,6 +128,7 @@ export default {
             <el-button
               type="danger"
               size="small"
+              icon="Delete"
               @click="removeDataById(scope.row.plateID)"
             >
               删除

src/pages/demo/diceke/Precipitation.vue

@@ -110,9 +110,7 @@ export default {
 <template>
   <div class="app-container">
     <div style="margin-bottom: 20px">
-      <el-button type="primary" @click="handleAdd" icon="el-icon-plus">
+      <el-button type="primary" @click="handleAdd"> 新增降水量 </el-button>
-        新增降水量
-      </el-button>
     </div>
     <el-table
       :cell-style="rowStyle"
@@ -130,17 +128,13 @@ export default {
         label="月份"
         :formatter="(row) => formatMonth(row.monthDate)"
       />
-      <el-table-column
+      <el-table-column align="center" fixed="right" label="操作" width="300">
-        align="center"
-        fixed="right"
-        label="操作"
-        width="300"
-      >
         <template #default="scope">
           <div style="display: flex; justify-content: center; gap: 8px">
             <el-button
               type="primary"
               size="small"
+              icon="Edit"
               @click="handleEdit(scope.row.precipID)"
             >
               修改
@@ -148,6 +142,7 @@ export default {
             <el-button
               type="danger"
               size="small"
+              icon="Delete"
               @click="removeDataById(scope.row.precipID)"
             >
               删除

src/pages/demo/diceke/shovel.vue

@@ -110,6 +110,10 @@ export default {
           });
       }
     },
+    //批量删除
+    handleSelectionChange(val) {
+      console.log(val);
+    },
   },
 };
 </script>
@@ -136,16 +140,14 @@ export default {
       <el-button
         type="primary"
         @click="handleAdd"
-        icon="el-icon-plus"
         style="
           width: 100px;
           display: flex;
           justify-content: center;
           align-items: center;
         "
+        >新增</el-button
       >
-        新增
-      </el-button>
     </div>
     <el-table
       :cell-style="rowStyle"
@@ -153,8 +155,10 @@ export default {
       border
       style="width: 100%"
       :span-method="spanMethod"
+      @selection-change="handleSelectionChange"
     >
       <!-- 表格列定义 -->
+      <el-table-column type="selection" width="55" />
       <el-table-column align="center" prop="shovelCode" label="铲号（#）" />
       <el-table-column align="center" label="属性">
         <template #default="scope">
@@ -167,6 +171,7 @@ export default {
             <el-button
               type="primary"
               size="small"
+              icon="Edit"
               @click="handleEdit(scope.row.shovelID)"
             >
               修改
@@ -174,6 +179,7 @@ export default {
             <el-button
               type="danger"
               size="small"
+              icon="Delete"
               @click="removeDataById(scope.row.shovelID)"
             >
               删除

src/pages/demo/electricLocomotiveWorkshop/needMiningTime.vue

@@ -83,6 +83,7 @@ export default {
       v-model="updateprecipitationform"
       title="修改降水量信息"
       width="500"
+      align-center
     >
       <el-form :model="precipitationform">
         <el-form-item label="降水量" :label-width="formLabelWidth">

src/pages/demo/electricLocomotiveWorkshop/singleMachineOutput.vue

@@ -7,6 +7,18 @@ import {
   findFangpaishuiPumpoperationrecordByMonthApi,
 } from "@@/apis/tables/drainageWorkshop/pumpOperationLog.ts";
 import { getSpecificDate } from "@@/utils/datetime";
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+// 按需引入 echarts 核心模块
+import * as echarts from "echarts/core";
+import { BarChart } from "echarts/charts";
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+} from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
 export default {
   data() {
     return {
@@ -188,6 +200,46 @@ export default {
           percentage: "60", //百分比
         },
       ],
+      reportDialogVisible: false,
+      machineOptions: [
+        {
+          value: "1501",
+          label: "1501",
+        },
+        {
+          value: "1502",
+          label: "1502",
+        },
+        {
+          value: "1503",
+          label: "1503",
+        },
+        {
+          value: "1504",
+          label: "1504",
+        },
+        {
+          value: "1505",
+          label: "1505",
+        },
+      ],
+      machineNum: "",
+      classOptions: [
+        {
+          value: "classA",
+          label: "甲班",
+        },
+        {
+          value: "classB",
+          label: "乙班",
+        },
+        {
+          value: "classC",
+          label: "丙班",
+        },
+      ],
+      classNum: "",
+      timeFrame: "",
     };
   },
   created() {
@@ -206,6 +258,10 @@ export default {
       const res = await findTotalMiningByMonthApi(data);
       console.log(res);
     },
+    //生成报表
+    generateReport() {
+      this.reportDialogVisible = true;
+    },
   },
 };
 </script>
@@ -219,6 +275,7 @@ export default {
         v-model="machine"
         style="width: 220px; margin-left: 20px"
         placeholder="请输入机台号"
+        maxlength="4"
       >
         <template #prefix>
           <span>#</span>
@@ -231,6 +288,13 @@ export default {
         @click="getMouthLoss"
         >查询</el-button
       >
+      <el-button
+        type="success"
+        size="mini"
+        style="margin-left: 20px"
+        @click="generateReport"
+        >生成报表</el-button
+      >
     </div>
     <div
       class="title"
@@ -246,6 +310,7 @@ export default {
       :span-method="spanMethod"
       :header-align="center"
       :cell-style="rowStyle"
+      :header-cell-style="{ 'background-color': '#EDF5FF' }"
     >
       <!-- 表格列定义 -->
       <el-table-column align="center" fixed prop="index" label="日期" />
@@ -327,5 +392,59 @@ export default {
         </div>
       </template>
     </el-table>
+    <el-dialog
+      v-model="reportDialogVisible"
+      title="报表"
+      width="850"
+      align-center
+    >
+      <div class="dialogbox">
+        <div class="dialogbox-header">
+          <el-select
+            v-model="machineNum"
+            placeholder="请选择机台"
+            style="width: 200px; margin-right: 20px"
+          >
+            <el-option
+              v-for="item in machineOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <el-select
+            v-model="classNum"
+            placeholder="请选择班组"
+            style="width: 200px; margin-right: 20px"
+          >
+            <el-option
+              v-for="item in classOptions"
+              :key="item.value"
+              :label="item.label"
+              npm
+              :value="item.value"
+            />
+          </el-select>
+          <el-date-picker
+            v-model="timeFrame"
+            type="monthrange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+          />
+        </div>
+        <div class="dialogbox-container">
+          <div ref="chartRef" style="width: 600px; height: 400px"></div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
+<style scoped lang="scss">
+.dialogbox {
+  height: 70vh;
+  .dialogbox-header {
+    margin-bottom: 10px;
+  }
+}
+</style>