更新巡查任务

src/api/inspectionWork/inspector.ts

@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+
+export function workSubList(params) {
+    return request({
+      url: '/api/riskManagement/inspection/task/list',
+      method: 'get',
+      params: params
+    });
+}

src/api/inspectionWork/riskManagement.ts

@@ -0,0 +1,2 @@
+import request from '@/utils/request';
+

src/views/worker/index.vue

@@ -109,7 +109,7 @@ const goToInformationReception = () => {
 };
 // 菜单数据
 const menu = ref([
-  { name: "巡查工作", icon: "icon1", num: 0, url: "" },
+  { name: "巡查工作", icon: "icon1", num: 0, url: "inspectionWork" },
   { name: "风险防控", icon: "icon2", num: 0, url: "riskManagement" },
   { name: "数据管理", icon: "icon3", num: 0, url: "" },
   { name: "在线点名", icon: "icon4", num: 0, url: "rollCallRecord2" }

src/views/worker/inspectionWork/index.vue

@@ -1,12 +1,94 @@
 <template>
+  <!--
   <van-tabs v-model:active="active" type="card">
     <van-tab title="巡查任务"> <PatrolTask /></van-tab>
     <van-tab title="巡查记录"><InspectionRecord /></van-tab>
     <van-tab title="巡查日历"><PatrolCalendar /></van-tab>
   </van-tabs>
+  -->
+  <div class="container">
+    <div class="tabs">
+      <div v-for="item in tabs" :key="item.id" class="tab" @click="handleClickTab(item.id)">
+        <i :class="item.icon" />
+        <div :class="activeIndex === item.id ? 'tab-text text-active' : 'tab-text'">{{ item.name }}</div>
+      </div>
+    </div>
+    <div class="content">
+      <PatrolTask v-if="activeIndex === 'PatrolTask'" @changIndex="handleClickTab" />
+      <InspectionRecord v-else-if="activeIndex === 'PatrolTask'" />
+      <PatrolCalendar v-else-if="activeIndex === 'PatrolTask'" />
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
+import { ref } from "vue";
 import InspectionRecord from "./inspectionRecord.vue";
 import PatrolCalendar from "./patrolCalendar.vue";
 import PatrolTask from "./patrolTask.vue";
+
+let activeIndex = ref('PatrolTask');
+let tabs = ref([
+  { id: 'PatrolTask', name: '巡查任务', icon: 'icon1' },
+  { id: 'InspectionRecord', name: '巡查记录', icon: 'icon2' },
+  { id: 'PatrolCalendar', name: '巡查日历', icon: 'icon3' },
+]);
+
+// 点击tab
+const handleClickTab = (id) => {
+  activeIndex.value = id;
+};
 </script>
+
+<style lang="scss" scoped>
+.container {
+  height: calc(100vh - 55px);
+  padding-top: 12px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  .tabs {
+    height: 90px;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 16px;
+    .tab {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      .icon1 {
+        background: url(./img/icon1_uncheck.png) no-repeat;
+      }
+      .icon2 {
+        background: url(./img/icon2.png) no-repeat;
+      }
+      .icon3 {
+        background: url(./img/icon3_uncheck.png) no-repeat;
+      }
+      .icon1, .icon2, .icon3 {
+        display: inline-block;
+        width: 48px;
+        height: 48px;
+        // background-color: #9d9d9d;
+        background-size: 100% 100%;
+      }
+      .tab-text {
+        color: #414F64;
+        font-size: 14px;
+        margin-top: 8px;
+      }
+      .text-active {
+        color: #2C81FF;
+      }
+    }
+  }
+  .content {
+    margin-top: 10px;
+    height: calc(100vh - 230px);
+    overflow-y: auto;
+  }
+}
+</style>

src/views/worker/inspectionWork/patrolTask.vue

@@ -17,7 +17,7 @@
       @load="getList"
     >
       <div
-        v-for="(item, index) in event_list"
+        v-for="(item, index) in taskData"
         :key="item.id"
         class="event-list-item"
       >
@@ -64,9 +64,11 @@ import { getCurrentInstance, reactive, ref, toRefs, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import searchImg from "@/assets/images/search.png";
 import closeImg from "@/assets/images/close.png";
+import { workSubList } from "@/api/inspectionWork/inspector";
+
 const proxy = getCurrentInstance()?.proxy;
 const router = useRouter();
-const event_list = ref([]);
+const taskData = ref([]);
 const total = ref(0);
 const loading = ref(false);
 const error = ref(false);
@@ -75,12 +77,13 @@ const initFormData = reactive({
   scope: "",
   cycle: "",
   time: "",
-  event_title: "",
-  id: ""
+  title: "",
+  id: 0
 });
 const data = reactive({
   form: { ...initFormData },
   queryParams: {
+    search_keyword: '',
     page: 1,
     pageSize: 10
   }
@@ -88,49 +91,56 @@ const data = reactive({
 const { queryParams, form } = toRefs(data);
 // 获取列表数据的方法
 async function getList() {
+  /*
   loading.value = true;
   try {
     // 这里是获取列表数据的逻辑，可以根据实际需求进行修改
-    const res = await fetchListData(
-      queryParams.value.page,
-      queryParams.value.pageSize
+    const res = await workSubList(
+      queryParams.value
     );
-    event_list.value = res.data.list;
-    total.value = res.data.total;
+    taskData.value = res.data;
+    total.value = res.total;
   } catch (err) {
     console.error("获取列表数据出错", err);
     error.value = true;
   } finally {
     loading.value = false;
   }
+  */
+  loading.value = false;
+  taskData.value = [
+    {id: 1, title: '巡查子任务1', cycle: '每天', scope: '范围', time: '2024-10-27'},
+    {id: 2, title: '巡查子任务2', cycle: '每天', scope: '范围', time: '2024-10-27'},
+    {id: 3, title: '巡查子任务3', cycle: '每天', scope: '范围', time: '2024-10-27'},
+    {id: 4, title: '巡查子任务4', cycle: '每天', scope: '范围', time: '2024-10-27'},
+    {id: 5, title: '巡查子任务5', cycle: '每天', scope: '范围', time: '2024-10-27'},
+  ];
+  total.value = 5;
 }
 // 搜索关键字变化时触发的方法
 function on_search_keyword(keyword) {
   // 根据搜索关键字更新查询参数
   queryParams.value.search_keyword = keyword;
+  queryParams.value.page = 1;
   // 刷新列表数据
   getList();
 }
 
 // 右侧关闭按钮点击时触发的方法
-function on_search_cancel() {
+const on_search_cancel = () => {
   // 清空搜索关键字
   queryParams.value.search_keyword = "";
+  queryParams.value.page = 1;
   // 刷新列表数据
   getList();
 }
-</script>
 
-<style lang="scss" scoped>
-.van-doc-block__title {
-  color: var(--van-doc-text-color-4);
-  margin: 0;
-  padding: 32px 16px 16px;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 16px;
+const handleView = (item) => {
+
 }
+</script>
 
+<style lang="scss" scoped>
 .event-list-item {
   position: relative;
   margin: 16px 16px 0;
@@ -139,7 +149,7 @@ function on_search_cancel() {
   border: 0.5px solid #eaedf7;
   box-shadow: 0 0 4px 0 #4554661a;
   &:first-child {
-    margin-top: 0;
+    margin-top: 16px;
   }
   .item-title {
     display: flex;