更新巡查工作模块

src/api/inspectionWork/inspector.ts

@@ -1,8 +1,41 @@
 import request from '@/utils/request';
 
-export function workSubList(params) {
+export function queryMyTask(params) {
     return request({
-      url: '/api/riskManagement/inspection/task/list',
+      url: '/api/riskManagement/inspection/task/children/task/list',
+      method: 'get',
+      params: params
+    });
+}
+
+export function queryMyTaskRecord(params) {
+    return request({
+      url: '/api/riskManagement/inspection/task/children/task/records',
+      method: 'get',
+      params: params
+    });
+}
+
+
+export function queryMyTaskByCalendar(params) {
+    return request({
+      url: '/api/riskManagement/inspection/task/children/task/calendar/list',
+      method: 'get',
+      params: params
+    });
+}
+
+export function addTaskResult(data) {
+  return request({
+      url: '/api/riskManagement/inspection/task/children/task/result/create',
+      method: 'post',
+      data: data
+    });
+}
+
+export function listTaskResult(children_task_id, params) {
+  return request({
+      url: '/api/riskManagement/inspection/task/children/task/result/'+children_task_id+"/list",
       method: 'get',
       params: params
     });

src/router/routes.ts

@@ -188,6 +188,23 @@ export const constantRoutes: Array<RouteRecordRaw> = [
     meta: {
       title: "风险防控"
     }
+  },
+  {
+    path: "/patorlTaskResultAdd",
+    name: "patorlTaskResultAdd",
+    component: () => import("@/views/worker/inspectionWork/patorlTaskResultAdd.vue"),
+    meta: {
+      title: "巡查上报"
+    }
+  }
+  ,
+  {
+    path: "/patorlTaskResultList",
+    name: "patorlTaskResultList",
+    component: () => import("@/views/worker/inspectionWork/patorlTaskResultList.vue"),
+    meta: {
+      title: "巡查结果"
+    }
   }
 ];
 

src/views/worker/inspectionWork/index.vue

@@ -15,8 +15,8 @@
     </div>
     <div class="content">
       <PatrolTask v-if="activeIndex === 'PatrolTask'" @changIndex="handleClickTab" />
-      <InspectionRecord v-else-if="activeIndex === 'PatrolTask'" />
-      <PatrolCalendar v-else-if="activeIndex === 'PatrolTask'" />
+      <InspectionRecord v-else-if="activeIndex === 'InspectionRecord'" />
+      <PatrolCalendar v-else-if="activeIndex === 'PatrolCalendar'" />
     </div>
   </div>
 </template>
@@ -87,7 +87,7 @@ const handleClickTab = (id) => {
   }
   .content {
     margin-top: 10px;
-    height: calc(100vh - 230px);
+    height: calc(100vh - 180px);
     overflow-y: auto;
   }
 }

src/views/worker/inspectionWork/inspectionRecord.vue

@@ -1,11 +1,330 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
+    <div class="container">
+      <van-search
+        placeholder="请输入任务名称"
+        v-model="queryParams.search_keyword"
+        class="common-search"
+        :left-icon="searchImg"
+        :right-icon="closeImg"
+        @search="on_search_keyword"
+        @click-right-icon.stop="on_search_cancel"
+      />
+      <van-dropdown-menu>
+        <van-dropdown-item
+          v-model="queryParams.type"
+          :title="!!queryParams.type ? '' : '业务'"
+          :options="businessOptions"
+          @change="change_busi_type"
+        />
+      </van-dropdown-menu>
+      <van-list
+        v-model:loading="loading"
+        v-model:error="error"
+        error-text="请求失败，点击重新加载"
+        :finished="finished"
+        finished-text="没有更多任务了"
+        @load="getList"
+      >
+        <div
+          v-for="(item, index) in taskData"
+          :key="item.id"
+          class="event-list-item"
+        >
+          <div class="item-title">
+            <div class="item-title-text">
+              {{ get_task_title(item.business) }}
+            </div>
+            <div class="item-title-control">
+              <van-button type="primary" @click="handleView(item)">
+                巡查结果
+              </van-button>
+            </div>
+          </div>
+          <div class="item-content">
+            <div class="item-data">
+              <div class="item-left">
+                <i class="icon4" />
+                <div class="item-data-label">巡查周期：</div>
+              </div>
+              <div class="item-data-value">{{ get_task_cycle(item.cycle) }}</div>
+            </div>
+            <div class="item-data">
+              <div class="item-left">
+                <i class="icon4" />
+                <div class="item-data-label">巡查范围：</div>
+              </div>
+              <div class="item-data-value">{{ get_task_range(item.task_range) }}</div>
+            </div>
+            <div class="item-data">
+              <div class="item-left">
+                <i class="icon4" />
+                <div class="item-data-label">执行日期：</div>
+              </div>
+              <div class="item-data-value">{{ item.create_time }}</div>
+            </div>
+            <div class="item-data">
+              <div class="item-left">
+                <i class="icon4" />
+                <div class="item-data-label">要求巡检时间：</div>
+              </div>
+              <div class="item-data-value">{{ item.task_time }}</div>
+            </div>
+          </div>
+        </div>
+      </van-list>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  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 { queryMyTaskRecord } from "@/api/inspectionWork/inspector";
+  
+  const proxy = getCurrentInstance()?.proxy;
+  const router = useRouter();
+  const taskData = ref([]);
+  const total = ref(0);
+  const loading = ref(false);
+  const error = ref(false);
+  const finished = ref(false);
+  const initFormData = reactive({
+    range: "",
+    cycle: "",
+    time: "",
+    title: "",
+    create_time: "",
+    id: 0
+  });
+  // 巡查业务选项
+  const businessOptions = [
+    { text: "全部", value: "" },
+    { text: "城市隐患巡查", value: "0" },
+    { text: "森林防火巡查", value: "1" },
+    { text: "重点危化企业巡查", value: "2" },
+    { text: "重点水库水位巡查", value: "3" }
+  ];
+  // 巡查周期选项
+  const cycleOptions = [
+    { value: '', label: '全部' },
+    { value: '0', label: '每年' },
+    { value: '1', label: '每月' },
+    { value: '2', label: '每周' },
+    { value: '3', label: '每日' },
+    { value: '4', label: '一次' }
+  ];
+  const rangeOptions = {
+        '0': '市级',
+        '1': '区县级',
+        '2': '镇街级',
+        '3': '村居级'
+  };
+  const get_task_title = (business: String) => {
+    return businessOptions.find(item => item.value == business).text
+  }
+  const get_task_cycle = (cycle: String) => {
+    return cycleOptions.find(item => item.value == cycle).label
+  }
+  const get_task_range = (range) => {
+    return rangeOptions[range]
+  }
+  const data = reactive({
+    form: { ...initFormData },
+    queryParams: {
+      search_keyword: '',
+      type: '',
+      page: 0,
+      pageSize: 10
+    }
+  });
+  const { queryParams, form } = toRefs(data);
+  // 获取列表数据的方法
+  async function getList() {
+    loading.value = true;
+    queryParams.value.page++;
+    queryMyTaskRecord(queryParams.value)
+      .then(res => {
+        var items = res.data || [];
+        total.value = res.total;
+        if (queryParams.value.page == 1) {
+          taskData.value = [];
+        }
+        items.forEach(val => {
+          taskData.value.push(val);
+        });
+        if (queryParams.value.pageSize * queryParams.value.page >= total.value) {
+          finished.value = true;
+        } else {
+          finished.value = false;
+        }
+      })
+      .catch(() => {
+        error.value = true;
+        finished.value = false;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+    /*
+    taskData.value = [
+      {id: 1, title: '巡查子任务1', cycle: '每天', range: '范围', time: '2024-10-27'},
+    ];
+    total.value = 5;
+    */
+  }
+  // 搜索关键字变化时触发的方法
+  function on_search_keyword(keyword) {
+    // 根据搜索关键字更新查询参数
+    queryParams.value.search_keyword = keyword;
+    queryParams.value.page = 0;
+    // 刷新列表数据
+    getList();
+  }
+  
+  // 右侧关闭按钮点击时触发的方法
+  const on_search_cancel = () => {
+    // 清空搜索关键字
+    queryParams.value.search_keyword = "";
+    queryParams.value.page = 0;
+    // 刷新列表数据
+    getList();
+  }
+  
+  const change_busi_type = () => {
+    queryParams.value.page = 0;
+    getList();
+  }
+  const handleView = (item) => {
+    router.push("/patorlTaskResultList?id="+item.id+"&type="+item.business+"&area_code="+item.area_code);
+  }
 
-</template>
-
-<style scoped lang="scss">
-
-</style>
+  onMounted(()=>{
+    console.log("onMounted");
+  })
+  </script>
+  
+  <style lang="scss" scoped>
+  .event-list-item {
+    position: relative;
+    margin: 16px 16px 0;
+    background: #ffffff;
+    border-radius: 4px;
+    border: 0.5px solid #eaedf7;
+    box-shadow: 0 0 4px 0 #4554661a;
+    &:first-child {
+      margin-top: 0px;
+    }
+    .item-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      min-height: 46px;
+      background-image: linear-gradient(180deg, #f3f7fd 0%, #ffffff 100%);
+      padding: 0 12px;
+      .item-title-text {
+        font-size: 16px;
+        color: #414f64;
+        font-weight: 600;
+      }
+  
+      .item-title-control {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .van-button {
+        width: 73px;
+        height: 24px;
+        padding: 0;
+      }
+    }
+    .item-content {
+      padding: 0 12px 12px;
+    }
+    .item-data {
+      font-size: 14px;
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: start;
+      line-height: 26px;
+      .item-left {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+      }
+      .item-data-label {
+        flex-shrink: 0;
+        color: #414f64;
+      }
+  
+      .item-data-value {
+        color: #414f64;
+      }
+    }
+  }
+  .van-dropdown-menu {
+    :deep(.van-dropdown-menu__bar) {
+      background: transparent;
+      box-shadow: none;
+    }
+    :deep(.van-dropdown-menu__item) {
+      justify-content: right;
+      margin-right: 20px;
+    }
+  }
+  .common-search {
+    :deep(.van-field__left-icon) {
+      .van-icon__image {
+        width: 12px;
+        height: 12px;
+      }
+    }
+    :deep(.van-field__right-icon) {
+      width: 30px;
+      height: 30px;
+      padding: 0;
+      .van-icon__image {
+        width: 30px;
+        height: 30px;
+      }
+    }
+  }
+  .icon1 {
+    width: 17px;
+    height: 16px;
+    background: url("@/assets/images/event/icon1.png") no-repeat;
+    background-size: 100% 100%;
+    margin-right: 7px;
+  }
+  .icon2 {
+    width: 17px;
+    height: 16px;
+    background: url("@/assets/images/event/icon2.png") no-repeat;
+    background-size: 100% 100%;
+    margin-right: 7px;
+  }
+  .icon3 {
+    width: 17px;
+    height: 16px;
+    background: url("@/assets/images/event/icon3.png") no-repeat;
+    background-size: 100% 100%;
+    margin-right: 7px;
+  }
+  .icon4 {
+    width: 17px;
+    height: 16px;
+    background: url("@/assets/images/event/icon4.png") no-repeat;
+    background-size: 100% 100%;
+    margin-right: 7px;
+  }
+  .icon5 {
+    width: 16px;
+    height: 16px;
+    background: url("@/assets/images/event/icon5.png") no-repeat;
+    background-size: 100% 100%;
+    margin-right: 7px;
+  }
+  </style>
+  

src/views/worker/inspectionWork/patorlTaskResultAdd.vue

@@ -0,0 +1,152 @@
+<template>
+    <van-form @submit="on_submit">
+        
+        <div style="padding: 16px 0 ;display:flex;flex-direction: row;justify-content: space-between;">
+            <div class="van-doc-block__title">{{get_task_title(type)}}</div>
+            <div class="van-doc-block__sub_title" @click="add" v-if="points.length < 3">新增巡查点</div>
+        </div>
+
+        <div style="padding: 8px 8px 0 8px;background: #f6f6f6" v-for="(point, index) in points" :key="index">
+            <van-field
+            v-model="point.inspection_point_name"
+                label="巡查点"
+                placeholder="填写巡查点"
+                :rules="[{ required: true, message: '请填写巡查点'  }]"
+            />
+
+            <van-field
+                v-model="point.inspection_result"
+                label="巡查结果"
+                placeholder="选择巡查结果"
+                :rules="[{ required: true, message: '请选择巡查结果'  }]"
+                readonly
+                @click="openPicker(point)"
+            />
+
+            <van-field
+            v-model="point.remark"
+                label="备注信息"
+                placeholder="填写备注信息"
+                :rules="[{ required: false, message: '请填写备注信息'  }]"
+            />
+
+            <van-field name="fileList" label="现场照片" label-align="top">
+                <template #input>
+                <FileUpload v-model="point.fileList" :fileType="['png', 'jpeg', 'jpg']"/>
+                </template>
+            </van-field>
+        </div>
+
+        <div class="popup-footer">
+            <van-button @click="handleCancel()" class="cancel-btn">取 消</van-button>
+            <van-button type="primary" native-type="submit" class="confirm-btn">提 交</van-button>
+        </div>
+    </van-form>
+    <van-popup v-model:show="showPicker" round position="bottom">
+        <van-picker
+            :columns="resultOptions"
+            @cancel="showPicker = false"
+            @confirm="onConfirm"
+        />
+    </van-popup>
+</template>
+<script lang="ts" setup>
+import {reactive, ref, toRefs, onMounted} from 'vue';
+import {useRoute, useRouter} from "vue-router";
+import {addTaskResult } from "@/api/inspectionWork/inspector";
+import { showToast } from 'vant';
+
+const route = useRoute();
+const router = useRouter();
+const id = ref('');
+const type = ref('');
+const area_code = ref('');
+const showPicker = ref(false);
+
+// 巡查业务选项
+const businessOptions = [
+  { text: "全部", value: "" },
+  { text: "城市隐患巡查", value: "0" },
+  { text: "森林防火巡查", value: "1" },
+  { text: "重点危化企业巡查", value: "2" },
+  { text: "重点水库水位巡查", value: "3" }
+];
+
+const resultOptions = [
+    { value: '0', text: '正常' },
+    { value: '1', text: '异常' }
+];
+
+const onConfirm = ({selectedOptions}) => {
+  showPicker.value = false;
+  point.value.inspection_result = selectedOptions[0].text;
+}
+
+const get_task_title = (business: String) => {
+  return businessOptions.find(item => item.value == business).text
+}
+const point = ref();
+const points = ref([{
+    inspection_point_name: '',
+    inspection_result: '',
+    remark: '',
+    fileList: []
+}]);
+
+const on_submit = () => {
+    console.log('on_submit');
+    addTaskResult({
+        children_task_id: id.value,
+        result: points.value,
+        area_code: area_code.value
+    }).then((res)=>{
+        console.log(res)
+        showToast(res.msg);
+        // router.back();
+    });
+};
+
+const openPicker = (p) => {
+    point.value = p;
+    showPicker.value = true;
+};
+
+const add = () => {
+    points.value.push({
+        inspection_point_name: '',
+        inspection_result: '',
+        remark: '',
+        fileList: []
+    })
+};
+
+const handleCancel = () => {
+    router.back();
+}
+
+onMounted(() => {
+  id.value = route.query.id as string;
+  type.value = route.query.type as string;
+  area_code.value = route.query.area_code as string;
+})
+
+</script>
+
+<style lang="scss" scoped>
+.van-doc-block__title {
+  color: var(--van-doc-text-color-4);
+  margin: 0px;
+  padding: 0 6vmin;
+  font-size: 4.6vmin;
+  font-weight: 600;
+  line-height: 6.0vmin;
+}
+
+.van-doc-block__sub_title {
+    margin: 0px;
+    padding: 0 6vmin;
+    font-size: 3.6vmin;
+    font-weight: 400;
+    line-height: 6.0vmin;
+}
+</style>

src/views/worker/inspectionWork/patorlTaskResultList.vue

@@ -0,0 +1,192 @@
+<template>
+    <div class="container">
+        <div style="padding: 16px 0 ;display:flex;flex-direction: row;justify-content: space-between;">
+            <div class="van-doc-block__title">{{get_task_title(type)}}</div>
+        </div>
+
+        <div
+          v-for="(item, index) in resultData"
+          :key="item.id"
+          class="event-list-item"
+        >
+          <div class="item-content">
+            <div class="item-data">
+              <div class="item-left">
+                <i class="icon4" />
+                <div class="item-data-label">巡检点：</div>
+              </div>
+              <div class="item-data-value">{{ item.inspection_point_name }}</div>
+            </div>
+            <div class="item-data">
+              <div class="item-left">
+                <i class="icon4" />
+                <div class="item-data-label">巡检结果：</div>
+              </div>
+              <div class="item-data-value">{{ item.inspection_result }}</div>
+            </div>
+            <div class="item-data">
+              <div class="item-left">
+                <i class="icon4" />
+                <div class="item-data-label">备注信息：</div>
+              </div>
+              <div class="item-data-value">{{ item.remark }}</div>
+            </div>
+            <div class="item-data">
+              <div class="item-left">
+                <i class="icon4" />
+                <div class="item-data-label">现场照片：</div>
+              </div>
+              <div class="item-data-value">{{ item.fileList }}</div>
+            </div>
+          </div>
+        </div>
+    </div>
+</template>
+
+
+<script lang="ts" setup>
+import {reactive, ref, toRefs, onMounted} from 'vue';
+import {useRoute, useRouter} from "vue-router";
+import {listTaskResult } from "@/api/inspectionWork/inspector";
+import { showToast } from 'vant';
+
+const route = useRoute();
+const router = useRouter();
+const id = ref('');
+const type = ref('');
+const resultData = ref([]);
+
+// 巡查业务选项
+const businessOptions = [
+  { text: "全部", value: "" },
+  { text: "城市隐患巡查", value: "0" },
+  { text: "森林防火巡查", value: "1" },
+  { text: "重点危化企业巡查", value: "2" },
+  { text: "重点水库水位巡查", value: "3" }
+];
+
+const data = reactive({
+    queryParams: {
+      page: 1,
+      pageSize: 100
+    }
+});
+const { queryParams } = toRefs(data);
+
+const get_task_title = (business: String) => {
+    return businessOptions.find(item => item.value == business).text
+}
+
+const getList = () => {
+    listTaskResult(id.value, queryParams.value)
+      .then(res => {
+        resultData.value = res.data || [];
+    });
+};
+
+onMounted(() => {
+  id.value = route.query.id as string;
+  type.value = route.query.type as string;
+  getList();
+})
+</script>
+
+
+<style lang="scss" scoped>
+.van-doc-block__title {
+  color: var(--van-doc-text-color-4);
+  margin: 0px;
+  padding: 0 6vmin;
+  font-size: 4.6vmin;
+  font-weight: 600;
+  line-height: 6.0vmin;
+}
+
+.event-list-item {
+    position: relative;
+    margin: 16px 16px 0;
+    background: #ffffff;
+    border-radius: 4px;
+    border: 0.5px solid #eaedf7;
+    box-shadow: 0 0 4px 0 #4554661a;
+    &:first-child {
+      margin-top: 0px;
+    }
+    .item-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      min-height: 46px;
+      background-image: linear-gradient(180deg, #f3f7fd 0%, #ffffff 100%);
+      padding: 0 12px;
+      .item-title-text {
+        font-size: 16px;
+        color: #414f64;
+        font-weight: 600;
+      }
+  
+      .item-title-control {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .van-button {
+        width: 73px;
+        height: 24px;
+        padding: 0;
+      }
+    }
+    .item-content {
+      padding: 0 12px 12px;
+    }
+    .item-data {
+      font-size: 14px;
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: start;
+      line-height: 26px;
+      .item-left {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+      }
+      .item-data-label {
+        flex-shrink: 0;
+        color: #414f64;
+      }
+  
+      .item-data-value {
+        color: #414f64;
+      }
+    }
+  }
+  .icon1 {
+    width: 17px;
+    height: 16px;
+    background: url("@/assets/images/event/icon1.png") no-repeat;
+    background-size: 100% 100%;
+    margin-right: 7px;
+  }
+  .icon2 {
+    width: 17px;
+    height: 16px;
+    background: url("@/assets/images/event/icon2.png") no-repeat;
+    background-size: 100% 100%;
+    margin-right: 7px;
+  }
+  .icon3 {
+    width: 17px;
+    height: 16px;
+    background: url("@/assets/images/event/icon3.png") no-repeat;
+    background-size: 100% 100%;
+    margin-right: 7px;
+  }
+  .icon4 {
+    width: 17px;
+    height: 16px;
+    background: url("@/assets/images/event/icon4.png") no-repeat;
+    background-size: 100% 100%;
+    margin-right: 7px;
+  }
+</style>

src/views/worker/inspectionWork/patrolCalendar.vue

@@ -1,11 +1,287 @@
+
+<template>
+    <Calendar ref="calendarRef" :current="current" :dotDays="taskData.days" @change="handleChange"/>
+    <div>
+    <div
+        v-for="(item, index) in taskData.tasks"
+        :key="item.id"
+        class="event-list-item"
+      >
+        <div class="item-title">
+          <div class="item-title-text">
+            {{ get_task_title(item.business) }}
+          </div>
+          <div class="item-title-control">
+            <van-button v-if="!item.task_status" type="primary" @click="handleUploadView(item)">
+              巡查上报
+            </van-button>
+            <van-button v-if="item.task_status" type="primary" @click="handleResultView(item)">
+              巡查结果
+            </van-button>
+          </div>
+        </div>
+        <div class="item-content">
+          <div class="item-data">
+            <div class="item-left">
+              <i class="icon4" />
+              <div class="item-data-label">巡查周期：</div>
+            </div>
+            <div class="item-data-value">{{ get_task_cycle(item.cycle) }}</div>
+          </div>
+          <div class="item-data">
+            <div class="item-left">
+              <i class="icon4" />
+              <div class="item-data-label">巡查范围：</div>
+            </div>
+            <div class="item-data-value">{{ get_task_range(item.task_range) }}</div>
+          </div>
+          <div class="item-data">
+            <div class="item-left">
+              <i class="icon4" />
+              <div class="item-data-label">要求巡检时间：</div>
+            </div>
+            <div class="item-data-value">{{ item.task_time }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+</template>
+
 <script setup lang="ts">
+import {onMounted, ref} from "vue";
+import { queryMyTaskByCalendar } from "@/api/inspectionWork/inspector";
+import {parseTime} from "@/utils/ruoyi";
+import { useRouter } from "vue-router";
 
-</script>
+const router = useRouter();
 
-<template>
+let calendarRef = ref();
+const current = ref('');
+const year_1 = ref('');
+const month_1 = ref('');
+const day_1 = ref('');
+const taskData  = ref({
+    days: [
+    //{ date: '2024-10-19', color: '#a2d7f1' },
+    //{ date: '2024-10-18', color: '#ffd5d8' },
+    //{ date: '2024-10-17', color: '#ffefcc' },
+    //{ date: '2024-10-16', color: '#dfdfdf' }
+    ],
+    tasks: []
+});
+
+const handleUploadView = (item) => {
+  router.push("/patorlTaskResultAdd?id="+item.id+"&type="+item.business+"&area_code="+item.area_code);
+}
+
+const handleResultView = (item) => {
+  router.push("/patorlTaskResultList?id="+item.id+"&type="+item.business+"&area_code="+item.area_code);
+}
+
+// 巡查业务选项
+const businessOptions = [
+  { text: "全部", value: "" },
+  { text: "城市隐患巡查", value: "0" },
+  { text: "森林防火巡查", value: "1" },
+  { text: "重点危化企业巡查", value: "2" },
+  { text: "重点水库水位巡查", value: "3" }
+];
+// 巡查周期选项
+const cycleOptions = [
+  { value: '', label: '全部' },
+  { value: '0', label: '每年' },
+  { value: '1', label: '每月' },
+  { value: '2', label: '每周' },
+  { value: '3', label: '每日' },
+  { value: '4', label: '一次' }
+];
+const rangeOptions = {
+      '0': '市级',
+      '1': '区县级',
+      '2': '镇街级',
+      '3': '村居级'
+};
+const get_task_title = (business: String) => {
+  return businessOptions.find(item => item.value == business).text
+}
+const get_task_cycle = (cycle: String) => {
+  return cycleOptions.find(item => item.value == cycle).label
+}
+const get_task_range = (range) => {
+  return rangeOptions[range]
+}
+
+const handleChange = (date) => {
+    year_1.value = parseTime(date.value, '{y}');
+    month_1.value = parseTime(date.value, '{m}');
+    day_1.value = parseTime(date.value, '{d}');
+    current.value = date.value;
+    console.log('handleChange:', year_1.value, month_1.value, day_1.value);
+    getList();
+}
+
+// 获取数据
+const getList = () => {
+    queryMyTaskByCalendar({year_1: year_1.value, month_1: month_1.value}).then((res)=>{
+        // console.log('res', res.data);
+        let days = [];
+        res.data.map((item, index)=>{
+            // 有事已完成
+            if(item.status == 1) {
+                days.push({"date": item.date, "color": "#a2d7f1"});
+            }
+            // 有事未完成
+            else if(item.status == 2) {
+                days.push({"date": item.date, "color": "#ffd5d8"});
+            }
+            // 未来有事
+            else if(item.status == 3) {
+                days.push({"date": item.date, "color": "#ffefcc"});
+            }
+
+            if(item.date == current.value) {
+                taskData.value.tasks = item.task_list;
+            }
+        });
+        taskData.value.days = days;
+        console.log('tasks:', taskData.value.tasks);            
+    });
+};
+
+const initData = () => {
+    year_1.value = parseTime(new Date(), '{y}');
+    month_1.value = parseTime(new Date(), '{m}');
+    day_1.value = parseTime(new Date(), '{d}');
+    current.value = parseTime(new Date(), '{y}-{m}-{d}');
+};
+
+onMounted(() => {
+    initData();
+    getList();
+})
+</script>
 
-</template>
 
 <style scoped lang="scss">
+.event-list-item {
+  position: relative;
+  margin: 16px 16px 0;
+  background: #ffffff;
+  border-radius: 4px;
+  border: 0.5px solid #eaedf7;
+  box-shadow: 0 0 4px 0 #4554661a;
+  &:first-child {
+    margin-top: 16px;
+  }
+  .item-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 46px;
+    background-image: linear-gradient(180deg, #f3f7fd 0%, #ffffff 100%);
+    padding: 0 12px;
+    .item-title-text {
+      font-size: 16px;
+      color: #414f64;
+      font-weight: 600;
+    }
+
+    .item-title-control {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .van-button {
+      width: 73px;
+      height: 24px;
+      padding: 0;
+    }
+  }
+  .item-content {
+    padding: 0 12px 12px;
+  }
+  .item-data {
+    font-size: 14px;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: start;
+    line-height: 26px;
+    .item-left {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+    .item-data-label {
+      flex-shrink: 0;
+      color: #414f64;
+    }
 
+    .item-data-value {
+      color: #414f64;
+    }
+  }
+}
+.van-dropdown-menu {
+  :deep(.van-dropdown-menu__bar) {
+    background: transparent;
+    box-shadow: none;
+  }
+  :deep(.van-dropdown-menu__item) {
+    justify-content: right;
+    margin-right: 20px;
+  }
+}
+.common-search {
+  :deep(.van-field__left-icon) {
+    .van-icon__image {
+      width: 12px;
+      height: 12px;
+    }
+  }
+  :deep(.van-field__right-icon) {
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    .van-icon__image {
+      width: 30px;
+      height: 30px;
+    }
+  }
+}
+.icon1 {
+  width: 17px;
+  height: 16px;
+  background: url("@/assets/images/event/icon1.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
+}
+.icon2 {
+  width: 17px;
+  height: 16px;
+  background: url("@/assets/images/event/icon2.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
+}
+.icon3 {
+  width: 17px;
+  height: 16px;
+  background: url("@/assets/images/event/icon3.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
+}
+.icon4 {
+  width: 17px;
+  height: 16px;
+  background: url("@/assets/images/event/icon4.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
+}
+.icon5 {
+  width: 16px;
+  height: 16px;
+  background: url("@/assets/images/event/icon5.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
+}
 </style>

src/views/worker/inspectionWork/patrolTask.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="container">
     <van-search
+      placeholder="请输入任务名称"
       v-model="queryParams.search_keyword"
       class="common-search"
       :left-icon="searchImg"
@@ -8,12 +9,20 @@
       @search="on_search_keyword"
       @click-right-icon.stop="on_search_cancel"
     />
+    <van-dropdown-menu>
+      <van-dropdown-item
+        v-model="queryParams.type"
+        :title="!!queryParams.type ? '' : '业务'"
+        :options="businessOptions"
+        @change="change_busi_type"
+      />
+    </van-dropdown-menu>
     <van-list
       v-model:loading="loading"
       v-model:error="error"
       error-text="请求失败，点击重新加载"
       :finished="finished"
-      finished-text="没有更多事件了"
+      finished-text="没有更多任务了"
       @load="getList"
     >
       <div
@@ -23,7 +32,7 @@
       >
         <div class="item-title">
           <div class="item-title-text">
-            {{ item.title }}
+            {{ get_task_title(item.business) }}
           </div>
           <div class="item-title-control">
             <van-button type="primary" @click="handleView(item)">
@@ -37,21 +46,21 @@
               <i class="icon4" />
               <div class="item-data-label">巡查周期：</div>
             </div>
-            <div class="item-data-value">{{ item.cycle }}</div>
+            <div class="item-data-value">{{ get_task_cycle(item.cycle) }}</div>
           </div>
           <div class="item-data">
             <div class="item-left">
               <i class="icon4" />
               <div class="item-data-label">巡查范围：</div>
             </div>
-            <div class="item-data-value">{{ item.scope }}</div>
+            <div class="item-data-value">{{ get_task_range(item.task_range) }}</div>
           </div>
           <div class="item-data">
             <div class="item-left">
               <i class="icon4" />
               <div class="item-data-label">要求巡检时间：</div>
             </div>
-            <div class="item-data-value">{{ item.time }}</div>
+            <div class="item-data-value">{{ item.task_time }}</div>
           </div>
         </div>
       </div>
@@ -64,7 +73,7 @@ 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";
+import { queryMyTask } from "@/api/inspectionWork/inspector";
 
 const proxy = getCurrentInstance()?.proxy;
 const router = useRouter();
@@ -74,54 +83,93 @@ const loading = ref(false);
 const error = ref(false);
 const finished = ref(false);
 const initFormData = reactive({
-  scope: "",
+  range: "",
   cycle: "",
   time: "",
   title: "",
   id: 0
 });
+// 巡查业务选项
+const businessOptions = [
+  { text: "全部", value: "" },
+  { text: "城市隐患巡查", value: "0" },
+  { text: "森林防火巡查", value: "1" },
+  { text: "重点危化企业巡查", value: "2" },
+  { text: "重点水库水位巡查", value: "3" }
+];
+// 巡查周期选项
+const cycleOptions = [
+  { value: '', label: '全部' },
+  { value: '0', label: '每年' },
+  { value: '1', label: '每月' },
+  { value: '2', label: '每周' },
+  { value: '3', label: '每日' },
+  { value: '4', label: '一次' }
+];
+const rangeOptions = {
+      '0': '市级',
+      '1': '区县级',
+      '2': '镇街级',
+      '3': '村居级'
+};
+const get_task_title = (business: String) => {
+  return businessOptions.find(item => item.value == business).text
+}
+const get_task_cycle = (cycle: String) => {
+  return cycleOptions.find(item => item.value == cycle).label
+}
+const get_task_range = (range) => {
+  return rangeOptions[range]
+}
 const data = reactive({
   form: { ...initFormData },
   queryParams: {
     search_keyword: '',
-    page: 1,
+    type: '',
+    page: 0,
     pageSize: 10
   }
 });
 const { queryParams, form } = toRefs(data);
 // 获取列表数据的方法
 async function getList() {
-  /*
   loading.value = true;
-  try {
-    // 这里是获取列表数据的逻辑，可以根据实际需求进行修改
-    const res = await workSubList(
-      queryParams.value
-    );
-    taskData.value = res.data;
-    total.value = res.total;
-  } catch (err) {
-    console.error("获取列表数据出错", err);
-    error.value = true;
-  } finally {
-    loading.value = false;
-  }
-  */
-  loading.value = false;
+  queryParams.value.page++;
+  queryMyTask(queryParams.value)
+    .then(res => {
+      var items = res.data || [];
+      total.value = res.total;
+      if (queryParams.value.page == 1) {
+        taskData.value = [];
+      }
+      items.forEach(val => {
+        taskData.value.push(val);
+      });
+      if (queryParams.value.pageSize * queryParams.value.page >= total.value) {
+        finished.value = true;
+      } else {
+        finished.value = false;
+      }
+    })
+    .catch(() => {
+      error.value = true;
+      finished.value = false;
+    })
+    .finally(() => {
+      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'},
+    {id: 1, title: '巡查子任务1', cycle: '每天', range: '范围', time: '2024-10-27'},
   ];
   total.value = 5;
+  */
 }
 // 搜索关键字变化时触发的方法
 function on_search_keyword(keyword) {
   // 根据搜索关键字更新查询参数
   queryParams.value.search_keyword = keyword;
-  queryParams.value.page = 1;
+  queryParams.value.page = 0;
   // 刷新列表数据
   getList();
 }
@@ -130,13 +178,17 @@ function on_search_keyword(keyword) {
 const on_search_cancel = () => {
   // 清空搜索关键字
   queryParams.value.search_keyword = "";
-  queryParams.value.page = 1;
+  queryParams.value.page = 0;
   // 刷新列表数据
   getList();
 }
 
+const change_busi_type = () => {
+  queryParams.value.page = 0;
+  getList();
+}
 const handleView = (item) => {
-
+  router.push("/patorlTaskResultAdd?id="+item.id+"&type="+item.business+"&area_code="+item.area_code);
 }
 </script>
 
@@ -149,7 +201,7 @@ const handleView = (item) => {
   border: 0.5px solid #eaedf7;
   box-shadow: 0 0 4px 0 #4554661a;
   &:first-child {
-    margin-top: 16px;
+    margin-top: 0px;
   }
   .item-title {
     display: flex;
@@ -205,6 +257,10 @@ const handleView = (item) => {
     background: transparent;
     box-shadow: none;
   }
+  :deep(.van-dropdown-menu__item) {
+    justify-content: right;
+    margin-right: 20px;
+  }
 }
 .common-search {
   :deep(.van-field__left-icon) {