优化界面操作

src/views/calc/dayYhj/index.vue

@@ -1,25 +1,19 @@
 <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 clearable
-                        v-model="queryParams.time"
-                        type="date"
-                        value-format="YYYY-MM-DD"
-                        placeholder="请选择日期">
-        </el-date-picker>
-      </el-form-item>
-<!--      <el-form-item label="产线编号" prop="deviceId">-->
-<!--        <el-input-->
-<!--            v-model="queryParams.deviceId"-->
-<!--            placeholder="产线编号"-->
-<!--            clearable-->
-<!--            @keyup.enter="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px" style="text-align: center;">
+      <el-form-item style="width: 208px; display: inline-block;">
+        <div style="display: flex; align-items: center; justify-content: center;">
+          <el-button icon="ArrowLeft" @click="navigateDay(-1)" size="small" style="margin-right: 15px;"></el-button>
+          <el-date-picker clearable
+                          v-model="queryParams.time"
+                          type="date"
+                          value-format="YYYY-MM-DD"
+                          placeholder="请选择日期"
+                          style="width: 130px"
+                          @change="handleQuery">
+          </el-date-picker>
+          <el-button icon="ArrowRight" @click="navigateDay(1)" size="small" style="margin-left: 15px;"></el-button>
+        </div>
       </el-form-item>
     </el-form>
 
@@ -66,13 +60,13 @@
     <!--    </el-row>-->
 
     <el-table v-loading="loading" :data="dayYhjList" show-summary  :summary-method="getSummaries" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center"/>
-      <!--      <el-table-column label="ID" align="center" prop="id" />-->
-      <el-table-column label="时间" align="center" prop="time" width="180">
-        <template #default="scope">
-          <span>{{ parseTime(scope.row.time, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
+<!--      <el-table-column type="selection" width="55" align="center"/>-->
+<!--      &lt;!&ndash;      <el-table-column label="ID" align="center" prop="id" />&ndash;&gt;-->
+<!--      <el-table-column label="时间" align="center" prop="time" width="180">-->
+<!--        <template #default="scope">-->
+<!--          <span>{{ parseTime(scope.row.time, '{y}-{m}-{d}') }}</span>-->
+<!--        </template>-->
+<!--      </el-table-column>-->
       <el-table-column label="产线编号" align="center" prop="deviceId"/>
       <el-table-column label="白柸投放米长（米）" align="center" prop="dayLength"/>
       <el-table-column label="白柸投放重量（吨）" align="center" prop="dayWeight"/>
@@ -182,6 +176,13 @@ const data = reactive({
 
 const {queryParams, form, rules} = toRefs(data);
 
+function navigateDay(offset) {
+  const currentDate = new Date(queryParams.value.time);
+  currentDate.setDate(currentDate.getDate() + offset);
+  queryParams.value.time = currentDate.toISOString().split('T')[0];
+  handleQuery();
+}
+
 /** 查询印花机日统计数据列表 */
 function getList() {
   loading.value = true;
@@ -208,16 +209,16 @@ function getSummaries(param) {
   const sums = {};
   columns.forEach((column, index) => {
     if (index === 0) {
-        sums[index] = '';
+        sums[index] = '合计';
       return;
     }
-    if (index === 1) {
-      sums[index] = '合计';
-        return;
-    }if (index === 2) {
-      sums[index] = '';
-        return;
-    }
+    // if (index === 1) {
+    //   sums[index] = '合计';
+    //     return;
+    // }if (index === 2) {
+    //   sums[index] = '';
+    //     return;
+    // }
     const values = data.map(item => Number(item[column.property]));
       if (!values.every(value => isNaN(value))) {
         sums[index] = values.reduce((prev, curr) => {