+ 巡检任务查询

src/utils/park/tool.js

@@ -1,3 +1,5 @@
+import dayjs from 'dayjs';
+
 export const cronToChinese = (cronExpression) => {
   const parts = cronExpression.split(' ');
   if (parts.length < 5 || parts.length > 6) {
@@ -93,3 +95,14 @@ const translateDayOfWeek = (field) => {
   }
   return days[parseInt(field)] + "日";
 }
+// 使用dayjs，计算日期是周几
+export const parseDateToWeekday = (dateString) => {
+  const date = dayjs(dateString);
+  const dayOfWeek = date.day();
+  const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+  return {
+    dayOfWeek,
+    weekDayName: weekDays[dayOfWeek]
+  };
+}
+

src/views/park/inspectTask/index.scss

@@ -0,0 +1,24 @@
+.task-calendar {
+  ::v-deep .el-calendar-table {
+    .el-calendar-day {
+      height: fit-content;
+
+      .task-content {
+        min-height: 100px;
+        max-height: 150px;
+        overflow-y: auto;
+        .task-item{
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          &::before{
+            content: '\2714';
+            display: block;
+            color: green;
+            margin-right: 6px;
+          }
+        }
+      }
+    }
+  }
+}

src/views/park/inspectTask/index.vue

@@ -3,10 +3,10 @@
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="任务名称" prop="taskName">
         <el-input
-            v-model="queryParams.taskName"
-            placeholder="请输入任务名称"
-            clearable
-            @keyup.enter.native="handleQuery"
+          v-model="queryParams.taskName"
+          placeholder="请输入任务名称"
+          clearable
+          @keyup.enter.native="handleQuery"
         />
       </el-form-item>
       <el-form-item>
@@ -18,47 +18,47 @@
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
-            type="primary"
-            plain
-            icon="el-icon-plus"
-            size="mini"
-            @click="handleAdd"
-            v-hasPermi="['park:inspectTask:add']"
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['park:inspectTask:add']"
         >新增
         </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-            type="success"
-            plain
-            icon="el-icon-edit"
-            size="mini"
-            :disabled="single"
-            @click="handleUpdate"
-            v-hasPermi="['park:inspectTask:edit']"
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['park:inspectTask:edit']"
         >修改
         </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-            type="danger"
-            plain
-            icon="el-icon-delete"
-            size="mini"
-            :disabled="multiple"
-            @click="handleDelete"
-            v-hasPermi="['park:inspectTask:remove']"
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['park:inspectTask:remove']"
         >删除
         </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-            type="warning"
-            plain
-            icon="el-icon-download"
-            size="mini"
-            @click="handleExport"
-            v-hasPermi="['park:inspectTask:export']"
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['park:inspectTask:export']"
         >导出
         </el-button>
       </el-col>
@@ -78,19 +78,19 @@
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleUpdate(scope.row)"
-              v-hasPermi="['park:inspectTask:edit']"
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['park:inspectTask:edit']"
           >修改
           </el-button>
           <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-delete"
-              @click="handleDelete(scope.row)"
-              v-hasPermi="['park:inspectTask:remove']"
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['park:inspectTask:remove']"
           >删除
           </el-button>
         </template>
@@ -98,13 +98,28 @@
     </el-table>
 
     <pagination
-        v-show="total>0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
     />
 
+    <el-calendar class="task-calendar">
+      <template
+        v-slot:dateCell="{date, data}"
+      >
+        <div class="day-content" :class="data.isSelected ? 'is-selected' : ''">
+          <div class="date-content">{{ data.day.split('-').slice(1).join('-') }}</div>
+          <div class="task-content">
+            <div class="task-item" v-if="[1, 2, 3, 4, 5].includes(parseDateToWeekday(date).dayOfWeek)">
+              园区日常巡逻
+            </div>
+          </div>
+        </div>
+      </template>
+    </el-calendar>
+
     <!-- 添加或修改巡检任务对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
@@ -148,7 +163,7 @@ import {
   updateInspectTask
 } from "@/api/park/inspectTask";
 import Crontab from "@/components/Crontab/index.vue";
-import {cronToChinese} from "@/utils/park/tool";
+import {cronToChinese, parseDateToWeekday} from "@/utils/park/tool";
 
 export default {
   name: "InspectTask",
@@ -191,6 +206,7 @@ export default {
     this.getList();
   },
   methods: {
+    parseDateToWeekday,
     cronToChinese,
     /** 查询巡检任务列表 */
     getList() {
@@ -300,3 +316,4 @@ export default {
   }
 };
 </script>
+<style scoped src="./index.scss" lang="scss"/>